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

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

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

</div>

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

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


当前回答

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

其他回答

试试我们的风格

white-space: normal;

& # 8203;是unicode字符的HTML实体,称为零宽度空格(ZWSP),它是一个不可见的字符,指定换行机会。类似地,连字符的作用是在单词边界内指定换行机会。

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

word-break: normal

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

您可以通过赋予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 */
}

删除空白:nowrap,如果有的话。

实现:

white-space: inherit;
word-break: break-word;