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