Wie implementiert man den erzwungenen Zeilenumbruch langer Wörter in DIV?

Question

Okay, das verwirrt mich wirklich. Ich habe einige Inhalte in einem

platziert:

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

Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test.

</div>

Der Inhalt überläuft jedoch (wie erwartet), da das „Wort“ zu lang ist.

Wie zwinge ich den Browser, Wörter bei Bedarf zu „umbrechen“, damit alles passt?

Answer 1

我不确定浏览器的兼容性

word-break: break-all;

你也可以使用 <wbr> 标签

Answer 2

使用word-wrap:break-word;

这甚至在IE6中也能正常工作，这是一个令人愉快的惊喜。

---

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

当前使用word-wrap的情况仍然可以正常工作，因为它是根据规范的overflow-wrap的别名。