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

好吧，这真把我搞糊涂了。我在一个div里面有一些内容，就像这样:

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

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

</div>

但是，由于“word”太长，内容会溢出DIV(正如预期的那样)。

我怎么能迫使浏览器在必要的地方“打破”这个词，以适应里面的所有内容?

当前回答

空白由浏览器保留。文本将在必要时自动换行，并在换行时自动换行

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td { 单词分割:break-word; 空白:pre-wrap; -moz-white-space: pre-wrap; ｝表{ 宽度:100 px; 边框:1px纯黑色; 显示:块; ｝ <表> < tr > < th > < / th >列表 < td > 1. longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext 2. breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline < / td > < / tr > 表> < /

2019-02-26 08:52:27

其他回答

使用自动换行:break-word;

它甚至可以在IE6中工作，这是一个令人惊喜的惊喜。

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

目前word-wrap的现有用法仍然适用，因为它是规范中溢换的别名。

2010-06-17 05:36:34

用word-break: normal似乎比用word-break: break-word更好，因为break-word会打断EN这样的首字母