强制不换行
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 只能在半角空格或连字符处换行。
水平有限,文中错误不妥在所难免,欢迎批评指正建议评论。文章将不定期修改完善斧正。谢谢!