特别声明，本文来源于@CHRIS COYIER的《Where Lines Break is Complicated. Here’s all the Related CSS and HTML》。
在Web页面上常常可以看到某个元素内部有一个很长的单词，元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢？这取决于CSS，那么CSS如何控制布局，以及CSS如何让文本更合理的方式展示。
比如下图的一种效果，在Web中是很常见的：
由于URL文本过长，已经超出容器的宽度，影响了整个视觉效果，甚至很多时候还会影响Web页面的布局效果。
最暴力的做法就是在容器上添加overflow:hidden;，可以阻止文字（或其他任何东西）溢出容器。虽然这可以解决视觉上的效果，但它使文本变得不可访问。在一些使用鼠标的桌面浏览器中，你可能可以连续三次单击该行来选择URL并复制它，但是你不能指望每个人都知道，或者在所有场景中都有可能这么做。
溢出流在这里也是自确的，因为这就是正在发生的事情。我们使用overflow:auto同样可以处理溢出流，它会触发一个水平滚动条。或许有的场景使用这种方案是合适的，但我想这不是一个普遍接受的解决方案。
接下来我们来看看怎么将长文本换行，看看有哪些解决方式，或者更适合的方式。
实验场
我的想法是，要有一个可调整的内容面板，加上各种CSS属性和值，你可以在上面进行切换，以查看对应的内容效果。
我确信这不是全面的或是最完美的。这只是我所知道的一些属性
在上面的示例中，你可以尝试着选择每个属性，得到对应的效果：
word-break: break-all
允许单词在任何地方被打破（这里所说的打破是强行折断换行）。word-break属性可以“解决”这个问题：
p {
word-break: break-all;
}
和@fantasi电子交流过，她解释说，这主要是因为单词分割生新定义一个词是什么。break-all值本质上将非CJK视为CJK，它可以在任何地方（除了句号和括号外）断开。keep-all是反向的，将CJK作为非CJK处理。
CJK：中日韩统一表意文字（CJK Unified Ideographs），目的是要把分别来自中文、日文、韩文、越文中，本质、意义相同、形状一样或稍异的表意文字（主要为汉字，但也有仿汉字如日本国字、韩国独有汉字、越南的喃字）于ISO 10646及Unicode标准内赋予相同编码 —— 维基百科
overflow-wrap: break-word
对于我们已经列出的问题，overflow-wrap特性似乎是最有效的解决方案：
p {
word-wrap: break-word; /* old name */
overflow-wrap: break-word;
}
乍一看，它看起来很像word-break: break-all。在上面的演示中，仔细观察URL，又并不像word-break:break-all一样，把单词pen打破pe\n，真正的效果是在pen单词末尾折断换行。这样的处理方式是我们更期待的一种。
@fantasai是这样解释的：
如果一个单词不能中断，因此它会溢出，那么它可以在任何地方断开，以避免溢出。
hyphens:auto
hyphens属性做了你可能会想到的事情，比如断字中添加断线（-）。连字符有时可以在URL和长单词中使用，但不能保证。举个例子，一个很长的数字会把它绊倒。此外，连字符会影响所有文字，更随意地打破文字，以帮助文本均匀地贴在右边。
p {
hyphens: auto;
}
@fantasai告诉我：
如果一个单词横跨在一行的末尾，我们可以使用连字符将它们连接起来了。
我想单词（“word”）可以帮助你解决这个问题。有些问题是长字符串不是“单词”，所以不能指望它来解决所有的溢出问题。
line-break: anywhere
还有一个属性叫做line-break。很明显，这主要是为了标点符号，但我似乎无法在任何浏览器中看到它。@fantasai告诉我，将会有一个新的属性值anywhere：
"like word-break: break-all; except it actually breaks everything like a dumb terminal client"。
总结
这篇文章主要简单的介绍了CSS中几个处理超常文本溢出容器的处理方式。比如说，单词被打破折断换还；还是整个单词在容器边缘整体换行；或者说单词打破，但打破处添加连接符-。虽然文章中提到过的几个属性能解决我们常见的场景，但对于一些特殊的场景还是要特殊考虑，尤其是长字符（特别是恶意长字符），上面的CSS属性估计都无法能解决。
扩展阅读
大漠
如需转载，烦请注明出处：https://www.w3cplus.com/css/where-lines-break-is-complicated-heres-all-the-related-css-and-html.html