有没有一种方法可以在 div 中自动换行长单词？

Question

我知道Internet Explorer有一个word-wrap样式，但我想知道是否有一种跨浏览器的方法来实现div中文本的自动换行。

最好使用CSS，但JavaScript片段也可以。

我指的是很长的字符串。

- blippy

---

默认情况下会发生自动换行。您的意思是在没有独立单词时进行换行吗？ - Quentin

Answer 1

通过阅读原始评论，rutherford正在寻找一种跨浏览器的方法来包装未中断的文本（可以从他对IE使用word-wrap进行推断，该属性用于打断未中断字符串）。

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

---

旧帖子，但在IE处于怪异模式时似乎无法呈现空格。 - Jeremy

我正在使用Firefox 24.6.0，word-wrap: break-word是实际起作用的。 - user545424

“Word-wrap: break-word” 虽然是由 Microsoft 创造的，但现在已经成为 CSS3 标准的一部分，并且它就是实现这个功能的关键 :-) - Pascal_dher

Answer 2

之前的大部分答案在Firefox 38.0.5上对我没用。而这个方法成功了...

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

文档：

• word-break单词换行
• word-wrap单词换行

- Paul Zahra

---

谢谢！这是唯一有用的答案（对我而言）， "word-break: break-all;" 是有效的。 - DaniCE

Answer 3

white-space: pre-wrap

quirksmode.org/css/whitespace.html

- NVI

---

死链。请提供更详细的回答。 - JoshYates1980

Answer 4

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

非常感谢您

- Hugo

---

Aaron Bennett在你之前2年就提到了同样的答案。你在这里所做的并没有增加价值。 - AaA

你好，如果你再读一遍两个回答，你会发现我想说的是，Aaron的解决方案没问题，但他写的其中一行代码让我出现了错误，所以我改成了另一个能够解决问题的方案。也许我应该在他的回答下留言，我知道这点，很抱歉，谢谢。 - Hugo

我不得不添加这个“white-space: -pre-wrap”，然后它就可以工作了 :) - Ravi Khambhati

Answer 5

如大卫所提到的，DIV默认情况下会换行。

如果您指的是没有空格的非常长的文本字符串，我会在服务器端处理字符串并插入空的span元素。

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

这并不是完全准确的，因为存在字体大小等问题。如果容器的大小是可变的，那么可以使用 span 选项。如果容器是固定宽度的，您可以直接插入换行符。

- DA.

---

@TomHert 这真的很奇怪。不过，呃，IE。它从来都不管用。话虽如此，这是5年前发布的。CSS3现在有一些更好的换行选项，IE可能会适应 https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap - DA.

是的，我知道，我只是被这个解决方案的简单性震惊了，所以我不得不尝试一下 :) - Tom Hert

Answer 6

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

- Slevin

---

尝试设置10像素的宽度...然后使用超过10像素的单词。 - Paul Zahra