好吧,这真把我搞糊涂了。我在一个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 class="container" style="background-color: green; width: 200px; height: 300px;">
   <div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
   <div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
 </div>

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

实现:

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

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

空白由浏览器保留。文本将在必要时自动换行,并在换行时自动换行

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td { 单词分割:break-word; 空白:pre-wrap; -moz-white-space: pre-wrap; } 表{ 宽度:100 px; 边框:1px纯黑色; 显示:块; } <表> < tr > < th > < / th >列表 < td > 1. longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext 2. breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline < / td > < / tr > 表> < /

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