html - 如何用两个 50% 表格单元格拆分单词？

Question

我正在尝试分解两个 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/

它破坏了整个元素的大小，如果单词太长，它就太大了。我该如何解决这个问题？

Answer 1

您可以使用word-break属性。

Allow long words to be able to break and wrap onto the next line

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

<强> JSFiddle Demo