CSS - 强制不换行/强制换行/英文断词换行

强制不换行
div{ white-space: nowrap; }

自动换行
div{ word-wrap: break-word; }

强制英文单词断行
div{ word-break: break-all; }

注意：word-wrap、word-break、overflow的组合使用。

 

1、white-space : 

normal（默认）空白会被浏览器忽略；

pre 空白会被浏览器保留；

nowrap 文本不会换行；

pre-wrap 保留空白符序列，但是正常进行换行；

pre-line 合并空白符序列，但是保留换行符；

inhreit 继承父元素的属性值

2、word-wrap :  

noraml（默认）只在允许的断字点换行（浏览器默认处理）

break-word 在长单词或URL地址内部进行换行；--（中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。但可对单词进行断词。）

word-wrap 属性允许长单词或 URL 地址换行到下一行。

3、word-break : 

normal（默认值）使用浏览器的默认处理；

break-all 允许在单词内换行；--（断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。）

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

 

水平有限，文中错误不妥在所难免，欢迎批评指正建议评论。文章将不定期修改完善斧正。谢谢！

转载于:https://www.cnblogs.com/libinblog/p/4238404.html