如何在 DIV 中的长单词中强制换行？

Question

好吧，这真的让我很困惑。我在 div 中有一些内容，如下所示：

 <div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

但是，内容溢出了 DIV（正如预期的那样），因为“单词”太长了。

我怎样才能强制浏览器在必要时“中断”单词以适应其中的所有内容？

原文由 Nathan Osman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 word-wrap:break-word;

它甚至可以在 IE6 中运行，这是一个惊喜。

---

word-wrap: break-word 已替换为 overflow-wrap: break-word; 适用于所有现代浏览器。 IE 是一个死浏览器，将永远依赖已弃用和非标准的 word-wrap 代替。

word-wrap 的现有用途今天仍然有效，因为它是 overflow-wrap 根据规范的别名。

原文由 Chi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我不确定浏览器的兼容性

word-break: break-all;

您也可以使用 <wbr> 标签

<wbr> （断字）意思是：“如果浏览器愿意，可以在这里插入一个换行符。”如果浏览器认为不需要换行，则什么也不会发生。

原文由 rahul 发布，翻译遵循 CC BY-SA 4.0 许可协议