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

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

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

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

</div>

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

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

当前回答

我用下面的代码解决了这个问题。

display: table-caption;

其他回答

首先，您应该确定元素的宽度。例句:

# sampleDiv { 宽度:80%; 自动换行:break-word; ｝ < div id = " sampleDiv " > aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa < / div >

因此，当文本达到元素宽度时，它将被分解成行。

这样做:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

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

word-break: normal

试试我们的风格

white-space: normal;

.word-break {
   word-break: keep-all;
   word-wrap: break-word;
}

推荐文章