本篇随笔主要介绍3个比较相近的文本属性word-wrap、white-space、word-break,先看看官方API对这3个属性的介绍——
word-wrap : normal | break-word
normal : 默认值。允许内容顶开指定的容器边界
break-word: 内容将在边界内换行。如果需要,词内换行( word-break )也将发生
white-space : normal | pre | nowrap normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。
如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。 nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。
word-break : normal | break-all | keep-all
normal : 默认值。允许在词间换行
break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
经试验,总结表格如下(略去pre):
word-wrap |
white-space |
word-break |
效果 |
备注 |
normal(默认) |
normal(默认) |
normal(默认) |
词间换行,词内不换行 |
所有浏览器显示效果相同 |
break-word |
normal(默认) |
normal(默认) |
词间换行,词内换行 |
所有浏览器显示效果相同 |
normal(默认) |
nowrap |
normal(默认) |
词间不换行,词内不换行 |
所有浏览器显示效果相同 |
normal(默认) |
normal(默认) |
break-all |
词间不换行,词内不换行 |
FF/Opera不同:不支持word-break属性 |
normal(默认) |
nowrap |
break-all |
词间不换行,词内不换行 |
所有浏览器显示效果相同 |
break-word |
nowrap |
normal(默认) |
词间不换行,词内不换行 |
所有浏览器显示效果相同 |
break-word |
normal(默认) |
break-all |
词间不换行,词内换行 |
FF/Opera不同:不支持word-break属性 |
break-word |
nowrap |
break-all |
词间不换行,词内不换行 |
所有浏览器显示效果相同 |
由此可以得出,white-space:nowrap;的设置优先级是最高的,即:在存在white-space:nowrap;的情况下,无论word-wrap和word-break属性设置为何值,显示效果均相同——强制内容在同一行显示,词间不换行,词内不换行。
还有两个常用的文本属性,如完成文本超出本分以”…”形式输出。则可用(所有浏览器显示均同):
overflow:hidden;
text-overflow:ellipsis;
倘若强制文本同一样显示,并且文本超出部分以“…”形式输出,则只需添加white-space:nowrap;即可。
倘若文本多行显示,并且文本超出部分以“…”形式输出,选择应用JavaScript进行控制是一个万全之策。
最新评论