有没有办法在 div 中将长单词包装起来？

我知道 Internet Explorer 有一种文字包装风格，但我想知道是否有一种跨浏览器的方法可以对 div 中的文本进行包装。

最好是 CSS，但 JavaScript 代码片段也可以。

编辑: 是的，指的是长字符串，干杯伙计们！

301628 次浏览
小开

正如 David 提到的，DIV 做默认包装单词。

如果你指的是没有空格的真正长的文本字符串，我所做的就是处理字符串服务器端并插入空的 span:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

这并不精确，因为有字体大小等问题。如果容器的大小是可变的，则 span 选项可以工作。如果它是一个固定宽度的容器，您可以直接插入换行符。

小开

您可以尝试为 div 指定一个宽度，无论是以像素、百分比还是 ems 为单位，这时 div 将保持该宽度，文本将自动在 div 中换行。

小开 
white-space: pre-wrap

Quirksmode.org/css/whitespace.html

小开
最佳答案

在阅读原始注释时，卢瑟福正在寻找一种 跨浏览器方法来包装 完好无损文本(根据他对 IE 使用的单词包装来推断，该方法旨在破坏连续的字符串)。

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap {
white-space: pre-wrap;      /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap;     /* Opera <7 */
white-space: -o-pre-wrap;   /* Opera 7 */
word-wrap: break-word;      /* IE */
}

我已经用过这门课一段时间了，效果非常好。(注意: 我只测试过 FireFox 和 IE)

小开

Aaron Bennet 的解决方案非常适合我，但是我不得不从他的代码中删除这一行—— > white-space: -pre-wrap;，因为它给出了一个错误，所以最终的工作代码如下:

.wordwrap {
white-space: pre-wrap;      /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap;   /* Opera 7 */
word-wrap: break-word;      /* IE */
}

非常感谢

小开

之前的大部分答案在 Firefox 38.0.5中都不适用。

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
// Content goes here
</div>

文件:


提交答案