如果有必要，我如何允许文本在单词中换行？
我正在寻找最好的解决方案，允许文本在一个单词的中间换行，如果必要的话。我说的最好，是指大多数浏览器兼容的浏览器，并且在单词内部中断之前，它会倾向于分词。
如果标记看起来比我的更好，也会有所帮助(参见我的答案)。
编辑：
注意:这是专门针对用户生成的内容的。
编辑2:
该网站上约25%的Firefox用户仍在使用v3.0或更低版本，因此支持他们至关重要。这是基于上个月的数据(大约121000次访问)。
回答 6
Stack Overflow用户
发布于 2010-02-13 21:29:15
css属性word-wrap: break-word会强制长单词换行到下一行，如果它们对于容器来说太长了。IE (很久以前)，Firefox和Safari都支持这一点。
编辑:看起来你可以在老版本的火狐中使用white-space: -moz-pre-wrap和white-space: pre-wrap来实现这一点。有关详细信息，请参阅here。不过，我还没有在老版本的Firefox上测试过。
Stack Overflow用户
发布于 2010-02-17 04:24:47
我的答案来自这个问题的另一个例子，可以在Wrapping long text in CSS上找到：
我使用组合键
word-wrap: break-word;
overflow: hidden;来处理这件事。word-wrap设置将允许在支持该属性的浏览器中对单词进行换行，而overflow设置将导致它在不识别word-wrap的浏览器中的可用空间末尾被截断。这是你在不使用javascript的情况下可能得到的最优雅的降级。
Stack Overflow用户
发布于 2010-02-13 21:33:47
您可能需要检查word-wrap: break-word CSS属性。
以下示例适用于Google Chrome 4.0、Firefox 3.5.7、Safari 4.0.4和IE 8：
<html>
<body>
<div style="word-wrap: break-word; width: 50px;">
Loremipsumdolorsitametconsectetueradipiscingelitselaoreetdoloremagnaaliq
</div>
</body>
</html>不幸的是，正如BalusC in a comment to one of the answers所指出的，上面的will not work in versions of Firefox older than 3.5。由于大量用户使用旧的火狐版本seems to be below ~6%作为noted by T.J. Crowder，所以对于不支持overflow: scroll的浏览器，您可能希望回退到word-wrap。它可能看起来不是很好，但如果你不希望许多单词比分配的空间长，那么其中一个用户看到滚动条的概率将非常低，而且随着时间的推移和用户升级浏览器，滚动条的概率会变得更低。至少你会在这些情况下优雅地失败。
https://stackoverflow.com/questions/2257657
复制相似问题