1 min to read

文字换行属性的整理

深入了解文字换行 word-break、word-wrap、white-space

Featured image

　　一直对文字换行不在意，今天被人家嘲讽作为一个前端，这都不会。趁着有空，整理一下

<style type="text/css">
#box{
    border: solid 1px #ccc;
    width: 150px;
}
</style>

<div id="box">
Hi&nbsp;&nbsp;,
This   is a incomprehensibilities long word.
<br />
你好&nbsp;&nbsp;，
这   是一个不可思议的长单词
</div>

　　上面的内容在页面上显示时，nbsp;和<br />可以正常发挥作用，而连续的空格会被缩减成一个（比如This和is之间的三个空格变成了一个），换行符也全都无效。句子超过一行后会自动换行，而长度超过一行的单个单词会超出边界

white-space

　　这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal、nowrap、pre、pre-wrap 和 pre-line。因为默认是 normal，所以我们主要研究下其它四种值时的展现情况。

　　不仅空格被合并，换行符无效，连原本的自动换行都没了！只有 </br>才能导致换行！所以这个值我们可以理解为永不换行

　　空格和换行符全都被保留了下来！不过自动换行还是没有

　　保留空格和换行符，且可以自动换行.

　　空格被合并了，但是换行符可以发挥作用

word-break

　　这个属性是控制单词如何被拆分换行的。它有三个值：normal、break-all 和 keep-all

　　所有“单词”一律不拆分换行，注意，我这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行

　　所有单词碰到边界一律拆分换行，不管你是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。所以用word-break:break-all时要慎重 这个效果基本满足要求，能不能只把incomprehensibilities拆一下，其它的单词不拆呢？那就需要下面这个属性了word-wrap

word-wrap(overflow-wrap)

　　该属性是允许长单词换行到下一行，原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap。 word-wrap 现在被当作 overflow-wrap 的 “别名”

　　这个属性也是控制单词如何被拆分换行的，实际上是作为word-break的互补，它只有两个值：normal、break-word

　　终于达到了上文我们希望的效果，只有当一个单词一整行都显示不下时，才会拆分换行该单词。 所以我觉得overflow-wrap更好理解好记一些，overflow，只有长到溢出的单词才会被强制拆分换行！

　　（其实前面的word-break属性除了列出的那三个值外，也有个break-word值，效果跟这里的word-wrap:break-word一样，然而只有Chrome、Safari等部分浏览器支持）

总结