如何用两个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属性。

允许长单词断行并换行到下一行

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

<<p> JSFiddle演示/strong>

Answer 2

添加" word-break:break-all; "属性到"

.table-left, .table-right {
    display: table-cell;
    width: 50%;
    word-break:break-all;
}

"

这是工作小提琴:http://jsfiddle.net/Lu50tLmf/4/

Answer 3

使用下面修改后的CSS

.table-wrapper {
    display:table;
    border-collapse:separate;
    border-spacing:5px 5px;
    width: 100%;
}
.table-left, .table-right {
    display: table-cell;
    width: 50%;
    word-break:break-all;
}