我正在寻找最佳解决方案，以便在必要时允许文本在单词中间换行。最好，我的意思是大多数浏览器兼容，并且会在单词中断之前支持单词中断。
如果标记看起来比我的更好（请参阅我的答案），这也会有所帮助。
编辑：
请注意，这专门针对用户生成的内容。
编辑2：
该网站上大约 25% 的 Firefox 用户仍在使用 v3.0 或更低版本，因此支持他们至关重要。这是基于上个月的数据（约 121,000 次访问）。
问问题
13152 次
8 回答
24
word-wrap: break-word如果长字对于它们的容器来说太长，css 属性将强制它们换行到下一行。IE（回溯）、Firefox 和 Safari 都支持此功能。
编辑：看起来你可以在旧版本的 Firefox 中实现这一点，也可以使用white-space: -moz-pre-wrap和white-space: pre-wrap. 请参阅此处了解更多信息。不过，我还没有用旧版本的 Firefox 对此进行测试。
于 2010-02-13T13:29:14.580 回答
6
由于没有明确的答案（取决于您的需求，例如，您想要连字符，您必须支持哪些浏览器？），我通过Adobe BrowserLab进行了一些研究以找出选项是什么：
如果您不需要连字符，您将使用<wbr>. 如果您需要连字符，则­最好使用连字符，但请注意，这在 Firefox 2.0 Mac/Windows 或 Safari 3.0 中不起作用（以字符换行）。
并且，请注意，如果您通过使用溢出、滚动或允许在字符处换行来选择根本不处理长字，IE6 和 IE7 都会通过扩展容器宽度来响应（至少在DIV我使用的情况下），所以要小心。
结果：
Browser Method Wraps at char 添加连字符 水平溢出 容器水平扩展 -------------------------------------------------- -------------------------------------------------- ------------------------------------------ Firefox 3.0 - Windows XP 无 否 否 是 否 Firefox 3.0 - Windows XP <wbr> 是 否 否 否 Firefox 3.0 - Windows XP 或 是 是 否 否 Firefox 3.0 - Windows XP 自动换行：断词 否 否 是 否 IE7 - Windows XP 无 否 否 否 是 IE7 - Windows XP <wbr> 是 否 否 否 IE7 - Windows XP 或 是 是 否 否 IE7 - Windows XP 自动换行：断词 是 否 否 否 Firefox 3.0 - OS X 无 否 否 是 否 Firefox 3.0 - OS X <wbr> 是 否 否 否 Firefox 3.0 - OS X 或 是 是 否 否 Firefox 3.0 - OS X 自动换行：断词 否 否 是 否 Safari 3.0 - OS X 无 否 否 是 否 Safari 3.0 - OS X <wbr> 是 否 否 否 Safari 3.0 - OS X 或 不 不 不 不 Safari 3.0 - OS X 自动换行：断词 是 否 否 否 Chrome 3.0 - Windows XP 无 否 否 是 否 Chrome 3.0 - Windows XP <wbr> 是 否 否 否 Chrome 3.0 - Windows XP 或 是 是 否 否 Chrome 3.0 - Windows XP 自动换行：断词 是 否 否 否 Firefox 2.0 - OS X 无 否 否 是 否 Firefox 2.0 - OS X <wbr> 是 否 否 否 Firefox 2.0 - OS X 或 否 否 是 否 Firefox 2.0 - OS X 自动换行：断词 否 否 是 否 Firefox 2.0 - Windows XP 无 否 否 是 否 Firefox 2.0 - Windows XP <wbr> 是 否 否 否 Firefox 2.0 - Windows XP 或 否 否 是 否 Firefox 2.0 - Windows XP 自动换行：断词 否 否 是 否 Firefox 3.5 - Windows XP 无 否 否 是 否 Firefox 3.5 - Windows XP <wbr> 是 否 否 否 火狐 3.5 - Windows XP 或 是 是 否 否 Firefox 3.5 - Windows XP 自动换行：断词 是 否 否 否 Firefox 3.5 - OS X 无 否 否 是 否 Firefox 3.5 - OS X <wbr> 是 否 否 否 Firefox 3.5 - OS X 或 是 是 否 否 Firefox 3.5 - OS X 自动换行：断词 是 否 否 否 IE6 - Windows XP 无 否 否 否 是 IE6 - Windows XP <wbr> 是 否 否 否 IE6 - Windows XP 或 是 是 否 否 IE6 - Windows XP 自动换行：断词 是 否 否 否 IE8 - Windows XP 无 否 否 是 否 IE8 - Windows XP <wbr> 是 否 否 否 IE8 - Windows XP 或 是 是 否 否 IE8 - Windows XP 自动换行：断词 是 否 否 否 Safari 4.0 - OS X 无 否 否 是 否 Safari 4.0 - OS X <wbr> 是 否 否 否 Safari 4.0 - OS X 或 是 是 否 否 Safari 4.0 - OS X 自动换行：断词 是 否 否 否
示例 HTML：
<html>
<head>
<style>
div {
width: 4em;
border: 1px solid black;
margin-bottom: 6em;
padding: .25em;
}
</style>
</head>
<body>
This is text easily contained by the DIV:
<div>proper width</div>
A long word with no character breaking:
<div>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i><wbr></i> tag:
<div>
A<wbr>R<wbr>e<wbr>a<wbr>l<wbr>l<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d<wbr>T<wbr>h<wbr>a<wbr>t<wbr>N<wbr>e<wbr>e<wbr>d<wbr>s<wbr>T<wbr>o<wbr>B<wbr>e<wbr>B<wbr>r<wbr>o<wbr>k<wbr>e<wbr>n A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
</div>
<i>&shy;</i> character:
<div>
A­R­e­a­l­l­y­L­o­n­g­W­o­r­d­T­h­a­t­N­e­e­d­s­T­o­B­e­B­r­o­k­e­n A­n­d­A­n­o­t­h­e­r­W­o­r­d
</div>
<i>overflow: scroll</i> CSS attribute:
<div style="overflow: scroll">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i>word-wrap: break-word</i> CSS attribute:
<div style="word-wrap: break-word">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
</body>
</html>
于 2010-02-13T18:01:29.340 回答
4
我从这个问题的另一个实例的回答，在Wrapping long text in CSS 中找到：
我使用组合
word-wrap: break-word;
overflow: hidden;
来处理这个。该word-wrap设置将允许单词在支持该属性的浏览器中被换行，尽管它的长度在支持该属性的浏览器中，而该overflow设置将导致它在不识别的浏览器中的可用空间末尾被切断word-wrap。这与您在不使用 javascript 的情况下可能获得的优雅降级差不多。
于 2010-02-16T20:24:47.117 回答
2
[编辑：OP更新了他的问题，说这是专门针对用户生成的内容；下面不会（很容易）为此工作（你必须有自己的连字符字典）。不过，把它留在这里，以防有人发现这个问题并需要一个 HTML 选项来执行此操作。]
您可以使用软连字符（又名可选连字符；­或­）。它是在HTML4中定义的。我从未使用过它，但我只是尝试过，它至少适用于 Windows 的 IE6、IE7、Chrome 4、FF 3.6 和 Safari 4。
有人可能会争辩说，用户代理（浏览器）应该自动处理这个问题（使用文档所在语言的断字字典）。实际上，我不知道有哪个网络浏览器可以自动完成。显然，如果您告诉它们可以，现代浏览器就会这样做；请参阅 wsanville 对 CSS 选项的回答。
于 2010-02-13T13:28:33.153 回答
1
您可能需要检查word-wrap: break-wordCSS 属性。
以下示例适用于 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 在对其中一个答案的评论中指出的那样，上述内容在 3.5 之前的 Firefox 版本中不起作用。由于使用旧 Firefox 版本的用户似乎低于 6%，正如TJ Crowder所指出的，您可能希望回退到overflow: scroll不支持的浏览器word-wrap。它可能看起来不是很好，但是如果您不希望有很多单词比分配的空间长，那么其中一个用户看到滚动条的概率会非常低，并且随着时间的推移它会变得更低，并且用户升级他们的浏览器。至少在这些情况下你会优雅地失败。
于 2010-02-13T13:33:47.060 回答
1
我在这里找到了类似的答案：http: //css-tricks.com/snippets/css/prevent-long-urls-from-break-out-of-container/
更强大的浏览器支持
仅 CSS
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
如果您的文本是 PHP 生成的，那么您有一个PHP 函数：
<?php
$text = "The quick brown fox jumped over the lazy dog.";
$newtext = wordwrap($text, 20, "<br />\n");
echo $newtext;
?>
此外，如果您有并且知道分隔符，您可以尝试PHP 函数爆炸。在 for 循环之后显示（explode 返回一个数组）。
于 2014-04-01T18:30:27.523 回答
0
过去，我使用过类似的东西（当时在 Safari 上不起作用，IIRC，但那是几年前的事了）：
A<wbr>V<wbr>e<wbr>r<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
（我会动态生成这个，这样做布局的人就不必看到这样的暴行了。）
于 2010-02-13T13:24:39.480 回答
0
在您希望它中断的点处输入键盘换行符。
例如。
这是一个很长的词
会成为
这是非常长的词
于 2010-04-20T21:29:19.833 回答