Question

好的，这让我很困惑。我在div中有一些内容如下：

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

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

</div>

然而，内容溢出了DIV（如预期的那样），因为'word'太长了。

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

Answer 1

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

Answer 2

我不确定浏览器的兼容性

word-break: break-all;

您也可以使用<wbr>标记

<wbr>（分词）表示：“浏览器可以在这里插入换行符，如果它祝愿。“浏览器没有想到断线必不可少发生的情况。

Answer 3

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

来源：

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

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

您可以使用 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。这意味着列宽不再是流体，而是仅基于第一行中列的宽度（或通过指定的宽度）定义。 Read more here

示例代码：

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并依赖width: auto时，使用以下内容可在除Firefox（v50.0.2）之外的大多数主流浏览器（Chrome，IE，Safari iOS / OSX）中使用。

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

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

需要注意的另一件事是使用 作为间距的文字可能会导致中间词断行。

Answer 7

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

Answer 8

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

display: table-caption;

Answer 9

删除white-space: nowrap，如果有的话。

实施：

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

Answer 10

首先，您应该确定元素的宽度。例如：

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

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

这样当文本到达元素宽度时，它将被分解为行。

Answer 11

来自MDN：

overflow-wrap CSS属性指定浏览器是否应在单词中插入换行符以防止文本溢出其内容框。

与word-break相比，overflow-wrap只有在整个单词无法放置在自己的行而不会溢出时才会创建中断。

所以你可以使用：

overflow-wrap: break-word;

Can I use？

Answer 12

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

.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 13

如@davidcondrey的回复中所述，不仅有ZWSP，而且还有SHY  ，可以在很长的结构化单词（例如德语或荷兰语）中使用，这些单词必须当场打断。您希望它成为。不可见，但它会在需要时提供连字符，从而使单词始终保持连接和线条填充。

那样，单词 luchthavenpolitieagent 可能会被标记为luchthavenpolitieagent，它的部分比单词的音节更长。
尽管我从没有读过任何官方的相关文章，但是在结构的单个单词中，这些软连字符在浏览器中的优先级要高于官方连字符（ if
实际上，没有任何浏览器能够自行破解如此长的构造单词。在较小的屏幕上产生一个新行，或者在某些情况下甚至是一个单词行（例如，当其中两个构造单词跟随时）。

仅供参考：机场警察是荷兰人

Answer 14

断字：通常比断字：断字好用，因为断字会破坏诸如EN之类的首字母

word-break: normal

Answer 15

这样做：

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

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

Answer 16

试试我们的风格

white-space: normal;

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

16 个答案:

CSS