文本换行word-wrap、word-break与white-space
本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn=b88c986e61708da0027fac035ad36f0f#rd
对于后续文章感兴趣的可以添加关注:
文中有些地方没显示全,查看全部内容,请点击上面的原文链接哈
在对页面内容进行排版的时候,不可避免的会遇到对文本进行处理的问题。今天整理了文本换行相关的内容,记录下来分享之。毕竟,好记性不如烂笔头嘛。
对于文本换行,自己之前也处理过相关的问题。知道要用到word-wrap,word-break和white-space等相关的样式规则。然而对于它们三个之前到底有什么区别,还说不清楚。本着理论与实践相结合实事求是的原则,今天抽时间看了下。
在mozilla官网上搜word-wrap会得到如下解释:
The word-wrap
property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
word-break的解释:
The word-break
CSS property is used to specify whether to break lines within words.
word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时而出现溢出包含框的现象。
word-break表明怎样进行单词内的断句。
从字面意思来看这两个都是用来对文本进行换行的,那么这两个到底有什么区别呢?我们来看一下官网上给出的例子。
首先看一下word-wrap的语法:
word-wrap: normal;word-wrap: break-word;
p { width: 13em; background: gold; }
当指定word-wrap:normal(默认值)时,我们看到Fernstraßenbauprivatfinanzierungsgesetzesund 这串单词很长des后面的位置显示不下,它会换一行显示,而且还从它的容器中溢出了。
p { width: 13em; background: gold; word-wrap: break-word; }
当我们给p元素加上样式word-wrap:break-word时运行结果如下图:
我们看到Fernstraßenbauprivatfinanzierungsgesetzesund这么一长串仍然会换到下一行显示,当下一行的宽度仍然不够显示的时候,他就会换行显示。官网上给的break-word的解释是Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.个人的理解是,对于普通的文本,当容器剩余的空间不足以显示的时候,它可以在任意的地方被截断(换行显示).
接下来在看看官网上给出的word-break的例子:
word-break的语法:
word-break: normal;
word-break: break-all;
word-break: keep-all;
再来看下面的三个实例:
.narrow {
padding: 5px;
border: 1px solid;
width: 8em;}
<p>1. <code>word-break: normal</code></p><p class="normal narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p>
.normal {
word-break: normal;}
运行结果如下图:
word-break:normal Use the default line break rule.也就是也就是单词过长时不换行,超出的部分溢出。
再来看word-break: break-all
<p>2. <code>word-break: break-all</code></p><p class="breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p>
.breakAll {
word-break: break-all;}
运行结果如下图:
break-all:Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.单词可能在任何位置被截断(中文,日文和韩文除外)
上文中有提到word-wrap:break-word也是对文本进行截断处理。它两的区别就在于break-word对于长文本会换到下一行进行显示,如果下一行也显示不完则进行换行。而break-all对于长文本不会换到下一行,直接在当前行截断显示(如上图)
那么word-break:keep-all的作用呢?我们知道对于中文,日语,朝鲜文不会出现像英文单词那样出现一个很长很长的串。对于CJK来说默认的就是换行显示的比如:
<p class="narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
这段文字它的运行效果如下图:
但有时候我们可能会碰到这样的需求,对于中文不让它进行换行,在同一行进行显示,这时候就是keep-all出场的时候了。在上图的例子的基础上,加上word-break:keep-all之后的显示效果如下图:
加上word-break:keep-all之后,图中的日文(没学过岛国语言,姑且这么称呼吧)就在同一行进行显示了。
keep-all:Don't allow word breaks for CJK text. Non-CJK text behavior is the same as for normal
.这个是官网对这一条规则的解释。对于cjk文本,不允许换行显示。
以上(word-wrap,word-break)就是css中对于文本换行相关的处理。接下来在来看一下white-space.
官网上对于white-space的解释是white-space
CSS 属性是用来描述如何处理元素中的空格。
white-space: normal
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
normal
连续的空白符会被合并,换行符会被当作空白符来处理。填充line盒子时,必要的话会换行。这就是默认我们所看到的。
nowrap
和 normal 一样,连续的空白符会被合并。但文本内的换行无效。当我们不想让文本进行换行显示时,使用white-space:nowrap时也管用的原因就在于此。
pre
连续的空白符会被保留。在遇到换行符或者<br>
元素时才会换行。
有的时候,我们为了防止文本溢出,需要对于超出包含框的文本做隐藏或换行处理。也有的时候,我们又有这样的需求,不让文本进行换行。以上是整理了我根据平时工作中遇到的文本换行相关的一些问题及处理方式的分析。。文中所提到的官网均只mozilla官网。如果文中有不对的地方或者您还有其他的好的方法处理文本换行,欢迎一起讨论哈。
文本换行word-wrap、word-break与white-space的更多相关文章
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- svg foreignObject的作用(文本换行,生成图片)
SVG内部利用foreignObject嵌入XHTML元素 <foreignObject>元素的作用是可以在其中使用具有其它XML命名空间的XML元素,换句话说借助<foreignO ...
- reverse the string word by word
题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...
- Vue插值文本换行问题
问题背景: 后端返回的字符串带有\n换行符,但Vue将其插值渲染成div内部文本后,文本并不换行,换行符显示为一个空格. 目标: 让文本在换行符处换行. 解决方法: 思路:实现文本换行有两种方法,一是 ...
- LeetCode 5:Given an input string, reverse the string word by word.
problem: Given an input string, reverse the string word by word. For example: Given s = "the sk ...
- Microsoft.Office.Interop.Word 创建word
Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...
- Asp.Net中文本换行
Asp.Net中文本换行 VB.NET Function HtmlCode(ByVal fString) If fString <> "" Then ...
- Eclipse console文本换行
Eclipse换行主要有3个方面 格式化时编辑器文本换行 源代码注释文本换行 Eclipse控制台console显示文本换行 1和2参考 http://hi.baidu.com/ae6623/item ...
随机推荐
- [SI]source insight使用
1. 快捷键 Ctrl+O: 工程中查找需要的文件如imx.c Ctrl+F: 当前文件查找字符串,然后Alt+W(hole)可以列出所有找到的位置 Ctrl+/:可以在当前project中查找字符串 ...
- VMware10.06精简版安装后台运行
VMware10.06精简版安装时会出现一个安装功能选择菜单,里面有一条后台运行必选功能,一般人会跳过条.当你打算在服务器上用vmware时,一定要安装后台运行服务,否则你无法换出正在运行的后台虚拟机 ...
- Async Programming - 1 async-await 糖的本质(1)
这一个系列的文章主要来讲 C# 中的语言特性 async-await 在语言层面的本质,我们都知道 await 是编译器进行了一个 rewrite,然而这个 rewrite 并不是直接 rewrite ...
- 红黑树(Red-Black tree)
红黑树又称红-黑二叉树,它首先是一颗二叉树,它具体二叉树所有的特性.同时红黑树更是一颗自平衡的排序二叉树.我们知道一颗基本的二叉树他们都需要满足一个基本性质–即树中的任何节点的值大于它的左子节点,且小 ...
- c#Ice开发之环境配置(一)
第一步,基于Windows下的安装,所以下载windows版的Ice,官网最新版本是Ice3.5.1: http://www.zeroc.com/download/ 安装完成可以在vs-工具的最下面看 ...
- win7 audio repeater 虚拟声卡 屏幕录像专家
- 【webpy开发实战】webpy的cookbook 个人版
版本:webpy0.3 问题1.1 所需软件及环境配置? 解决办法 sqlite: jinja2:找不到jinja2模块时,将jinja模块文件夹加入 sys.path -> sys.path ...
- 根据 MySQL 状态优化 ---- 4. 临时表
查看 MySQL 服务器运行的各种状态值: mysql> show global status: 4. 临时表 查看设置: mysql> show variables where Vari ...
- Partitioning & Archiving tables in SQL Server (Part 2: Split, Merge and Switch partitions)
Reference: http://blogs.msdn.com/b/felixmar/archive/2011/08/29/partitioning-amp-archiving-tables-in- ...
- TCP\IP三次握手连接,四次握手断开分析
TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标 ...