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

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

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

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

</div>

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

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

当前回答

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

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

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

其他回答

这样做:

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

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

CSS换行:break-word;，在FireFox 3.6.3中测试

使用自动换行:break-word;

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

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

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

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

display: table-caption;

当使用flexbox并依赖于宽度时，发现使用以下功能在大多数主流浏览器(Chrome, IE, Safari iOS/OSX)上都有效，除了Firefox (v50.0.2):

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

注意:如果你不使用自动修复器，你可能需要添加浏览器厂商前缀。

另一件需要注意的事情是使用 因为空格会在中间导致换行。

推荐文章