我正在寻找最佳解决方案，以便在必要时允许文本包含在单词的中间。最好的，我的意思是大多数浏览器兼容，并且会在单词中断之前支持单词分隔符。
如果标记看起来比我的好，也会有所帮助（参见我的回答）。
修改
请注意，这是专门针对用户生成的内容。
编辑2：
该网站上约有25％的Firefox用户仍在使用v3.0或更低版本，因此支持这些用户至关重要。这是基于上个月的数据（约121,000次访问）。
答案 0 :(得分：22)
如果css属性word-wrap: break-word对于容器而言太长，则会强制将长字包裹到下一行。 IE（后退），Firefox和Safari支持这一点。
修改：看起来您可以使用white-space: -moz-pre-wrap和white-space: pre-wrap在旧版本的Firefox中实现此目的。有关详细信息，请参阅here。我没有用旧版本的Firefox测试过这个。
答案 1 :(得分：5)
由于没有明确的答案（取决于您的需求，例如，您是否需要连字符，您必须支持哪些浏览器？），我通过Adobe BrowserLab进行了一些研究以找出选项：
如果您不需要连字符，则可以使用<wbr>获得最佳兼容性。如果你需要连字符，那么使用­是最好的选择，但请注意，这在Firefox 2.0 Mac / Windows或Safari 3.0中不起作用（在char处包装）。
并且，请注意，如果您选择不使用溢出，滚动或允许对字符进行换行来处理长字，IE6和IE7都会通过扩展容器宽度来响应（至少使用DIV我用过，所以要小心。
<强>结果：
Browser Method Wraps at char Adds Hyphens Overflows horizontally Container expands horizontally ---------------------------------------------------------------------------------------------------------------------------------------------- Firefox 3.0 - Windows XP None No No Yes No Firefox 3.0 - Windows XP <wbr> Yes No No No Firefox 3.0 - Windows XP ­ or ­ Yes Yes No No Firefox 3.0 - Windows XP word-wrap: break-word No No Yes No IE7 - Windows XP None No No No Yes IE7 - Windows XP <wbr> Yes No No No IE7 - Windows XP ­ or ­ Yes Yes No No IE7 - Windows XP word-wrap: break-word Yes No No No Firefox 3.0 - OS X None No No Yes No Firefox 3.0 - OS X <wbr> Yes No No No Firefox 3.0 - OS X ­ or ­ Yes Yes No No Firefox 3.0 - OS X word-wrap: break-word No No Yes No Safari 3.0 - OS X None No No Yes No Safari 3.0 - OS X <wbr> Yes No No No Safari 3.0 - OS X ­ or ­ No No No No Safari 3.0 - OS X word-wrap: break-word Yes No No No Chrome 3.0 - Windows XP None No No Yes No Chrome 3.0 - Windows XP <wbr> Yes No No No Chrome 3.0 - Windows XP ­ or ­ Yes Yes No No Chrome 3.0 - Windows XP word-wrap: break-word Yes No No No Firefox 2.0 - OS X None No No Yes No Firefox 2.0 - OS X <wbr> Yes No No No Firefox 2.0 - OS X ­ or ­ No No Yes No Firefox 2.0 - OS X word-wrap: break-word No No Yes No Firefox 2.0 - Windows XP None No No Yes No Firefox 2.0 - Windows XP <wbr> Yes No No No Firefox 2.0 - Windows XP ­ or ­ No No Yes No Firefox 2.0 - Windows XP word-wrap: break-word No No Yes No Firefox 3.5 - Windows XP None No No Yes No Firefox 3.5 - Windows XP <wbr> Yes No No No Firefox 3.5 - Windows XP ­ or ­ Yes Yes No No Firefox 3.5 - Windows XP word-wrap: break-word Yes No No No Firefox 3.5 - OS X None No No Yes No Firefox 3.5 - OS X <wbr> Yes No No No Firefox 3.5 - OS X ­ or ­ Yes Yes No No Firefox 3.5 - OS X word-wrap: break-word Yes No No No IE6 - Windows XP None No No No Yes IE6 - Windows XP <wbr> Yes No No No IE6 - Windows XP ­ or ­ Yes Yes No No IE6 - Windows XP word-wrap: break-word Yes No No No IE8 - Windows XP None No No Yes No IE8 - Windows XP <wbr> Yes No No No IE8 - Windows XP ­ or ­ Yes Yes No No IE8 - Windows XP word-wrap: break-word Yes No No No Safari 4.0 - OS X None No No Yes No Safari 4.0 - OS X <wbr> Yes No No No Safari 4.0 - OS X ­ or ­ Yes Yes No No Safari 4.0 - OS X word-wrap: break-word Yes No No No
示例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>
答案 2 :(得分：4)
我在Wrapping long text in CSS找到了这个问题的另一个实例的回答：
我使用组合
word-wrap: break-word;
overflow: hidden;
处理这个问题。 word-wrap设置允许在支持该属性的浏览器中尽管其长度被包装，而overflow设置将导致它在浏览器的可用空间的末尾被切断不承认word-wrap。这就像你可能在不使用javascript的情况下获得的那样优雅。
答案 3 :(得分：2)
[编辑：OP更新了他的问题，说这是专门针对用户生成的内容;以下内容不会（轻松）为此工作（您必须拥有自己的连字词典）。但是，如果有人发现这个问题并且需要一个HTML选项来执行此操作，请将其留在此处。]
您可以使用软连字符（也称为可选连字符; ­或­）。它是在HTML4中定义的。我从来没有使用它，但我只是尝试了它的工作原理：至少IE6，IE7，Chrome 4，FF 3.6和Safari 4 for Windows。
一个可以认为用户代理（浏览器）应该自动处理（使用文档所在语言的连字词典）。 在实践中，我不知道有一个自动执行此操作的Web浏览器。显然，现代浏览器会告诉他们可以;请参阅wsanville的CSS选项答案。
答案 4 :(得分：1)
您可能需要查看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。由于使用旧版Firefox seems to be below ~6%的用户数量为noted by T.J. Crowder，因此对于不支持overflow: scroll的浏览器，您可能希望回退到word-wrap。它可能看起来不太好，但是如果你不期望很多单词比分配的空间长，那么其中一个用户看到滚动条的概率会非常低，并且随着时间的推移会变得更低。用户升级其浏览器。在这种情况下，至少你会优雅地失败。
答案 5 :(得分：1)
我在这里找到了类似的答案： http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-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返回一个数组）。
答案 6 :(得分：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
（我会动态生成这个，以便做布局的人不必看这种暴行。）
答案 7 :(得分：0)
在您希望它断开的位置输入键盘换行符。
例如
Thisisaverylongword
会变成
Thisisavery 长字