有没有办法在 div 中对长单词进行自动换行？

Question

我知道 Internet Explorer 有自动换行样式，但我想知道是否有跨浏览器方法可以对 div 中的文本执行此操作。

最好是 CSS，但 JavaScript 片段也可以正常工作。

我指的是长字符串。

Answer 1

您可以尝试指定 div 的宽度，无论是像素、百分比还是 em，此时 div 将保持该宽度，并且文本将在 div 内自动换行。

Answer 2

阅读原始评论，卢瑟福正在寻找一种跨浏览器方式来包装不间断文本（通过他在 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中测试过）

Answer 3

之前的大部分答案在 Firefox 38.0.5 中对我不起作用。这确实...

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

文档：

• 分词
• 自动换行

Answer 4

white-space: pre-wrap

quirksmode.org/css/whitespace.html

Answer 5

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 */
}

非常感谢

Answer 6

正如 david 提到的，DIV 默认情况下会换行。

如果您指的是非常长的没有空格的文本字符串，我所做的是在服务器端处理字符串并插入空跨度：

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

这并不准确，因为存在字体大小等问题。如果容器大小可变，则跨度选项有效。如果它是固定宽度的容器，您可以继续插入换行符。