搞懂css 的 word-break、word-wrap、white-space(overflow-wrap)

1，white-space 这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行

五个属性 normal | nowrap | pre | pre-wrap | pre-line。因为默认是normal

• nowrap  永不换行；空格被合并，换行符无效，连原本的自动换行都没了！只有</br>才能导致换行；
• pre    空格和换行符全都被保留了下来！不过自动换行没了；
• pre-wrap  显然pre-wrap就是preserve+wrap，保留空格和换行符，且可以自动换行
• pre-line  空格被合并了，但是换行符可以发挥作用 ，自动换行还在，所以pre-line其实是preserve+new line+wrap

是否能发挥作用	换行符	空格（不支持就合并）	自动换行	</br>、nbsp;
normal	×	×	√	√
nowrap	×	×	×	√
pre	√	√	×	√
pre-wrap	√	√	√	√
pre-line	√	×	√	√

 

 

 

 

 

 

 

2，word-break  是控制单词如何被拆分换行的

三个属性 normal | break-all | keep-all 

 keep-all  所有“单词”一律不拆分换行，只有空格可以触发自动换行；

break-all  所有单词碰到边界一律拆分换行

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

只有当一个单词一整行都显示不下时，才会拆分换行该单词