如何在DIV中强行换行？

好吧，这真的使我感到困惑。我在div中有一些内容，例如：

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

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

</div>

但是，由于“单词”太长，内容溢出了DIV（如预期的那样）。

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

#1楼

可以将其添加到“跨浏览器”解决方案的公认答案中。

资料来源：

.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;
}

#2楼

我只是在谷歌搜索同一问题，然后在此处发布我的最终解决方案。 这也与这个问题有关。

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

#3楼

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

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

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

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

#4楼

 是称为零宽度空格（ZWSP）的Unicode字符的HTML实体，该字符为不可见字符，用于指定换行符。同样，连字符的目的是在单词边界内指定换行符。

#5楼

只是尝试我们的风格

white-space: normal;

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3164314

标签

div