我正在尝试在两个50％宽度的单元格的表中打断长字。我已经尝试过了，word-wrap: break-word;但是没有帮助。
的HTML
<section class="table-wrapper">
<section class="table-left">
<p>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</p>
</section>
<section class="table-right">
<p>SHOOOOOOOOOOOOOOOOOOORT</p>
</section>
</section>
的CSS
.table-wrapper {
display:table;
border-collapse:separate;
border-spacing:5px 5px;
width: 100%;
}
.table-left, .table-right {
display: table-cell;
width: 50%;
}
Jsfiddle：http : //jsfiddle.net/Lu50tLmf/
它破坏了整个元素的大小，如果单词太长，则太大。我怎样才能解决这个问题？
您可以使用该word-break属性。
允许较长的单词可以打断并换行到下一行
在.table-left, .table-right：
消除 display:table-cell;
加 word-break:break-all;
更改为此：
.table-wrapper {
display:table;
border-collapse:separate;
border-spacing:5px 5px;
width: 100%;
}
.table-left, .table-right {
width: 50%;
word-break:break-all;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句