如何在DIV的长词中强制换行?

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

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


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


</div>

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

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

547859 次浏览
小开

我不确定浏览器的兼容性

word-break: break-all;

你也可以使用<wbr>标记

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

小开

__abc1 __abc0， __abc2

小开
最佳答案

<罢工> word-wrap:break-word;使用

它甚至可以在IE6中工作，这是一个惊喜

word-wrap: break-word已被overflow-wrap: break-word;所取代，它可以在每个现代浏览器中运行。IE作为一个已死的浏览器，将永远依赖已弃用的非标准word-wrap。

word-wrap的现有用途今天仍然有效，因为根据规范，它是overflow-wrap的别名。

小开

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

来源:

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

我刚刚在谷歌上搜索了同样的问题，并发布了我的最终解决方案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。这意味着列的宽度不再是流动的，而是仅根据第一行中的列的宽度(或通过指定的宽度)定义。点击这里阅读更多。

示例代码:

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 */
}
小开

首先，您应该确定元素的宽度。例句:

#sampleDiv{
width: 80%;
word-wrap:break-word;
}
<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

so that when the text reaches the element width, it will be broken down into lines.

小开

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

小开

试试我们的风格

white-space: normal;
小开

这样做:

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


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

发现使用以下工作在大多数主要浏览器(Chrome, IE, Safari iOS/OSX)除了Firefox (v50.0.2)时使用flexbox和依赖width: auto。

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

注意:如果你不使用自动修复器，你可能需要添加浏览器厂商前缀。

另一件要注意的事情是使用&nbsp;作为空格的文本可能会在单词中间导致换行。

小开

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

display: table-caption;
小开

从中数:

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

与word-break相反，overflow-wrap只在整个单词不能被放置在自己的行上而不溢出时才会创建一个换行符。

所以你可以用:

overflow-wrap: break-word;

我可以用吗?

小开

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

实现:

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

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

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

小开
正如@davidcondrey的回复中提到的，不仅有ZWSP，还有SHY &#173; &shy;，可以用于非常长的构造词(想想德语或荷兰语)，必须当场打破。 看不见，但它在需要的时候提供了一个连字符，从而最大限度地保持单词连接和行填充 这样的话，单词luchthavenpolitieagent可以被标记为lucht&shy;haven&shy;politie&shy;agent，它给出了比单词的音节更长的部分 虽然我从来没有读过任何关于它的官方文章，但这些软连字符在浏览器中比构造的单个单词中的官方连字符获得了更高的优先级(如果< em > < / em >他们有一些扩展)。实际上，没有浏览器能够自行破解这么长的构造词;在较小的屏幕上产生一个新的行，或者在某些情况下甚至是一个单词行(比如当两个构造的单词跟随时)。< / p >

供你参考:这是荷兰语，机场警察的意思

小开

用word-break: normal似乎比用word-break: break-word更好，因为break-word会打断EN这样的首字母

word-break: normal
小开

你可以为此使用网格系统。

<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>
小开 
.word-break {
word-break: keep-all;
word-wrap: break-word;
}

提交答案