演示代码片段：gist.github.com/skylar2826/…
默认行为
默认位置不够，单词(word.length <= width)换行展示；对于超长单词(word.length > width)默认不换行展示。
问题&实现方案探索
默认超长单词不换行，会导致内容撑开容器宽度，可能导致页面布局错乱。
我们期望超长单词进行换行，方案探索：直接断词。
直接断词
实现
width: 200px;
word-break: break-all;
演示
问题&解决方案探索
直接断词展示无法直观识别出一个完整单词。
我们期望能直观识别出一个单词，方案探索：单词断词使用“-”连词符。
单词断词使用“-”连词符
使用浏览器默认断词规则
实现
width: 200px;
hyphens: auto; // 使用浏览器默认断词规则
演示
问题&解决方案探索
不同浏览器使用的默认断词规则不同，会造成不同浏览器文本展示不统一的问题。
我们期望在不同浏览器上展示统一，即使用同一断词规则。方案探索：使用npm包统一断词规则，在单词中间生成
使用npm包统一断词规则，在单词中间生成
实现
width: 200px;
hyphens: manual; // 自定义实现
使用hyphen npm包协助插入"­" // hyphen断词规则: [hyph-utf8](https://www.ctan.org/pkg/hyph-utf8)
小结
为防止超长单词不断词导致布局错乱，我们对单词进行断词展示，断词单词以“-”连接。如需考虑不同浏览器展示统一，可以考虑hyphen包，他帮助我们使用hyph-utf8断词规则在单词中间生成连词符，使得单词在合理的位置进行断词。
多行文本内容超长省略+单词断词
实现
width: 200px;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
hyphens: auto;
演示
word-break、overflow-wrap属性详解
word-break
word-break: break-all; // 能显示完也直接断词
word-break: keep-all; // 显示不完，换行；换行还显示不完，溢出展示，即不断词
overflow-wrap
overflow-wrap: break-word; // 显示不完，换行；换行还显示不完，断词
/* or */
overflow-wrap: anywhere; // anywhere与break-word相似，但anywhere更适用弹性布局
word-break: normal; // 使用默认规则断词：显示不完，换行；换行显示不完，溢出，即不断词
overflow-wrap: anywhere; // 显示不完，换行；换行显示不完，断词
// word-break + overflow-wrap = word-break: break-normal(废弃);
