到目前为止这是我的代码:
<div style="width:100px;height:100px;background:red">
ssssssssssssssssssssssssssssssssssssss
</div>
然而,
word-wrap:break-word;
word-break:break-all;
并不是很有用,因为它无法在Firefox上进行自动换行。我可以用CSS做什么?
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
width:200px;
上面的代码非常适合我
一起使用以下规则:
/* For Firefox */
white-space: pre-wrap;
word-break: break-all;
/* For Chrome and IE */
word-wrap: break-word;
您必须在div上应用以下css类:
.content-div{
word-break:break-all;
word-wrap: break-word;
}
并在div中绑定的表格上添加以下样式
style='table-layout:fixed;width:306px;'
它适用于IE7,FF 3.6和Chrome。
您使用宽度和显示属性以及自动换行属性:
width: 100px;
word-wrap: break-word;
display:inline-block;
它在IE和FF中都适用于我。
它适用于Firefox:
word-break: initial;
word-wrap: break-word;
这很适合我:
/* For Firefox */
white-space: pre-wrap;
overflow-wrap: break-word;
/* For Chrome and IE */
word-wrap: break-word;
它看起来溢出包装是firefox中的新功能。更多信息可以在这里找到:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
关于我们尝试这个的方法:
div{ overflow-wrap:break-word; }
使用以下样式,它在mozilla firefox中对我来说很好用。
word-wrap: break-word;
display:block;