在CSS中包装长文本
我有文字喜欢
PellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesque feugiat tempor elit. Ut mollis lacinia quam. Sed pharetra, augue aliquam ornare vestibulum, metus massalaoreet tellus, eget iaculis lacus ipsum et diam. 我不想要水平滚动。 是否可以包装文本（自动换行）。 我知道有一些IE特定的属性。
感谢您的时间。
更新：我也可以使用jQuery，Javascript，PHP来做到这一点。 但是怎么样？ 我的意思是字母（字体）不是固定宽度或任何你称之为。
我用的是组合
word-wrap: break-word; overflow: hidden;
处理这个。 word-wrap设置将允许在支持该属性的浏览器中尽管其长度被包装，而overflow设置将导致它在不识别word-wrap浏览器中的可用空间的末尾被切断。 这就像你可能在不使用javascript的情况下获得的优雅降级一样。
根据http://www.w3.org/TR/css3-text/#word-break0
word-break: break-all;
…与word-wrap（现在重命名为overflow-wrap ）的function不同，因为即使是小字也可能在行尾时被破坏。 但它的确有效。
在一些罕见的情况下hyphen: auto; 可能会给你带来更好的结果，但前提是你的长词包含在浏览器使用的词典中。
在扩展到Duroth的答案时，您可以使用以下php代码插入害羞连字符
$longest_length = 15; $string_with_long_word = 'short lonngerrrrr lonnnnnnnggeeeeeeeeeeeeeeeeeessssssssssssssssstttttttttttttt and another looooooooooooonnnnnnnnngwwooooooooororoooorrrrrd'; $string = preg_replace_callback("/[a-z0-9]{{$longest_length},}/", 'putShyHyphen', $string_with_long_word); function putShyHyphen($matches) { $string = $matches[0]; $newstring = ''; for ($i=0; $i
简单的CSS。 试试这个：把你的文字放在< pre>...< /pre>
css规则
pre { overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ /* width: 99%; */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }
不幸的是，除非您对仅支持特定浏览器（IE7 / Win，Safari，Firefox 3.5）感到满意，否则您的问题没有纯CSS解决方案。
自动换行：break-word; 有效，但仅限于IE。
如果你能够改变服务器端（PHP，ASP）或可能是客户端（Javascript）的文本，你可以编写一个小函数，在你的文本中插入“害羞的连字符”（ ＆shy; ）。 这样，可以在连字符的每个实例中分解文本，如果单词没有被分解，则不会显示害羞的连字符。
编辑，一个例子：
blablablablablablablablabla (etc)
将在您的浏览器中显示如下：
blablabla- blablabla- blabla
您必须使用JavaScript并使用如下函数：
或者你可以使用连字符
一个新的答案，因为你已经改变了你的问题：
这是一个非常简单的PHP解决方案：
在任何语言课程中都可以达到同样的目的。
作为word-wrap: break-word当宽度不固定时（在
甚至更少）， word-wrap: break-word不能正常工作，Stack Exchange会添加一些不可见的Unicode标记，浏览器会使用这些标记来查找换行符的可能位置。 但是：当访问者复制文本时，那些隐形标记仍然存在，这可能是坏事。 有关Meta的更多详细信息， 请参阅https://meta.stackexchange.com/questions/170970/occasionally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert/ 。
在复制结果文本时，每隔几个字符插入 ，而不是Unicode魔术。 这适用于我在Chrome 25，Firefox 19，Safari 6，Internet Explorer 9（在Mac上的Parallels上的Windows 7中;模拟IE8和IE7也适用），Android 4.1上的股票浏览器和Chrome以及iOS 6.1.2上的Safari ， 也许Opera也支持 。 请参阅此JS Bin示例 。
有一天，
建议的标签可以打破很长的单词（或URL），但是你会得到从浏览器到浏览器的混合结果，试图在窄div中传递文本。 例如200px div：
在Chrome中数字中断，在Firefox中他们没有 – 你得到两列数字！ 似乎Firefox没有考虑前一行“长”字有多少可用空间 – 它并没有抓住每个机会。 如果这种行为得到纠正，我希望Firefox也会考虑这会如何影响文本对齐。
“害羞”标签有助于Firefox，但你仍然会得到“粗糙”的文字。 我还没有做过大量的测试，但是当在Firefox中使用短文字（少于8个字符）时，看起来害羞的标签会产生不可预测的结果（div会丢失它们的风格）。 我个人更喜欢Chrome更积极的rest！