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

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

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

</div>

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

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


当前回答

试试我们的风格

white-space: normal;

其他回答

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

实现:

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

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

我不确定浏览器的兼容性

word-break: break-all;

你也可以使用<wbr>标签

<wbr>(换字)表示:“浏览器 可以在这里插入换行符吗 愿望。”浏览器不会思考 换行没有必要 发生了。

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

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

display: table-caption;