如何在DIV中的loooooong单词中强制换行？

Question

好的,这真让我感到困惑.我在div中有一些内容,如下所示:

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

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

</div>

但是,内容溢出了DIV(如预期的那样),因为'word'太长了.

如何强制浏览器在必要时"破坏"单词以适应所有内容？

Answer 1

使用[ word-wrap:break-word;]

Answer 2

我不确定浏览器的兼容性

word-break: break-all;

你也可以使用<wbr>标签

<wbr>(分词)表示:"浏览器可以在此处插入换行符,如果愿意的话." 它浏览器不认为必要的换行没有任何反应.

Answer 3

这可以添加到"跨浏览器"解决方案的已接受答案中.

资料来源:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

 CSS

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Answer 4

我只是谷歌搜索同样的问题,并在这里发布了我的最终解决方案.它也与这个问题有关,所以我希望你不介意重新发布.

你可以用轻松地做到这一点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 */
}

希望能帮到别人.

Answer 5

​是一个称为零宽度空间(ZWSP)的unicode字符的HTML实体,它是一个不可见的字符,用于指定换行机会.类似地,连字符的目的是在单词边界内指定换行机会.

Answer 6

发现当使用flex-box并依赖时,使用以下内容可以在除Firefox(v50.0.2)之外的大多数主流浏览器(Chrome,IE,Safari iOS/OSX)中使用width: auto.

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

注意:如果您不使用自动修复程序,则可能需要添加浏览器供应商前缀.

需要注意的另一件事是使用 间距的文本可能导致中间单词换行.

Answer 7

空白由浏览器保留。文本将在必要时换行，并在换行符处

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

演示

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Answer 8

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

Answer 9

我用下面的代码解决了我的问题.

display: table-caption;

Answer 10

删除white-space: nowrap（如果有）。

实行：

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