html遇到英文单词整体换行,CSS单词换行and断词，你真的完全了解吗_html/css_WEB-ITnose...

背景

某天老板在群里反馈，英文单词为什么被截断了？

很显然，这是我们前端的锅，自行背锅。这个问题太简单了，css里加两行属性，分分钟搞定。

开心的提交代码，刷新页面。我擦，怎么还是没有断词？不可能啊！！！ 难道这两个属性有什么兼容性问题或者有什么限制条件？为了不搬石头砸自己的脚，还是去深入了解一下。

css单词断词、换行

关键字： word-break, word-wrap

提前声明：上面的问题用这两个属性来解决并没有什么问题，这里只是再加深巩固一下知识。想了解原因的同学请直接看下一小节。

word-break, word-wrap这两个属性都比较常见，断词、溢出显示省略号等常见功能都需要用到它们。但具体它们分别是什么意思，各自有什么属性，可能很多人都不是很清楚。反正我不懂。每次都是从网上查一查就用上了，两个属性长得太像了，总是记不住。

来，先看文档。

normal 使用浏览器默认的换行规则。break-all 允许在单词内换行。keep-all 只能在半角空格或连字符处换行。

http://www.w3school.com.cn/cssref/pr_word-break.asp

normal 只在允许的断字点换行(浏览器保持默认处理)。break-word 在长单词或 URL