【CSS文本处理】文字换行以及空格处理

为什么80%的码农都做不了架构师？>>>   

1、word-break

用于设置目标组件中文本内容的换行方式。该属性下有三个值：

1）normal-浏览器默认规则进行换行。通常，浏览器的处理规则是，对于西方 文字来说，浏览器只会在半角空格。连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行。

2）keep-all：只能在半角空格或连字符处换行。

3）break-all：设置允许在单词中间换行。

2、white-space

用于设置目标组件中文本内容对空格的处理方式。该属性支持如下两个属性值：

1）normal：这是默认的处理方式。文本自动处理换行，假如抵达容器边界会转到下一行。

2）nowarp：强制在同一行内显示所有文本，直到文本结束或者遇到<br / >元素。

3、word-wrap

用于设置目标组件中文本内容的换行方式该属性支持以下两个属性值：

1）normal：浏览器默认规则进行换行。

2）break-word ：设置允许在单词中间换行。

4、浏览器支持：

到目前为止，Opera没有支持word-break属性，IE、Safari、Chrome都支持该属性，Safari、Chrome未实现keep-all属性值。

5、word-break与word-wrap属性的区别：

1）word-break：将该属性设置为break-all，可以让组件内每一行文本的最后一个单词自动换行。

2）word-wrap：该属性会尽量让长单词、URL地址不要换行。即使该属性设为break-word，浏览器也会尽量让长单词、URL地址单独占一行，只有当一行文本都不足以显示这个长单词、URL地址时，浏览器才会在长单词、URL地址的中间换行。

转载于:https://my.oschina.net/aram/blog/147617