如何在DIV中强制换行符？

好吧，这真让我困惑。 我在div里面有一些内容：

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

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

我如何强制浏览器在必要的地方“打破”这个词，以适应所有的内容？

Answer 1

使用自动换行：断字;

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

Answer 2

我不确定浏览器的兼容性

 word-break: break-all; 

你也可以使用<wbr>标签

（word break）意思是：“浏览器可以在这里插入一个换行符，如果它希望的话。” 它的浏览器不认为一个换行符是不需要的。

Answer 3

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

资料来源：

• 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

我只是谷歌search相同的问题，并张贴我的最终解决scheme在这里 。 这也与这个问题有关，所以我希望你不要介意转发。

你可以通过给它一个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 。 这意味着列的宽度不再是stream体，而是仅基于第一行中的列的宽度（或通过指定的宽度）来定义。 在这里阅读更多 。

示例代码：

 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

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

Answer 7

发现使用下面的工作在大多数主stream浏览器（Chrome浏览器，IE浏览器，Safari iOS / OSX），除了Firefox（v50.0.2）使用弹性框，依靠width: auto 。

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

注意：如果您不使用autoprefixer，则可能需要添加浏览器供应商前缀。

另外要注意的是使用文本 间距会导致中间字换行。

Answer 8

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

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

这样当文本达到元素宽度时，就会被分解成行。

Answer 9

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

 display: table-caption; 

Answer 10

来自MDN ：

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

与word-break相反，如果整个单词不能在没有溢出的情况下放在自己的行上， overflow-wrap只会创build一个中断。

所以你可以使用：

 overflow-wrap: break-word; 

我可以使用吗？

Answer 11

只是尝试在我们的风格

 white-space: normal; 

Answer 12

做这个：

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