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

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

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

</div>

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

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


当前回答

这样做:

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

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

其他回答

我刚刚在谷歌上搜索了同样的问题,并在这里发布了我的最终解决方案。这也和这个问题有关。

您可以通过赋予div样式word-wrap: break-word轻松地做到这一点(您可能还需要设置它的宽度)。

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

然而,对于表,你还需要应用:table-layout: fixed。这意味着列的宽度不再是流动的,而是仅根据第一行中的列的宽度(或通过指定的宽度)定义。点击这里阅读更多。

示例代码:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

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

word-break: normal

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

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

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

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

中数:

overflow-wrap CSS属性指定浏览器是否应该在单词中插入换行符,以防止文本溢出其内容框。 与换行符相反,溢出自动换行只在整个单词不能被放置在自己的行上而不溢出时才会创建换行符。

所以你可以用:

overflow-wrap: break-word;

我能用吗?

试试我们的风格

white-space: normal;