如何用两个 50% 的表格单元格打断一个单词？答案

【问题标题】：How to break a word with two 50% table cells?如何用两个 50% 的表格单元格打断一个单词？
【发布时间】：2014-10-07 03:53:46
【问题描述】：

我正在尝试在一个包含两个 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/

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

【问题讨论】：

起飞display:table-cell; 和word-wrap:break-word; 将工作。 JSFiddle

标签： html css cell css-tables

【解决方案1】：

您可以使用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;
}

JSFiddle Demo

【讨论】：

【解决方案2】：

使用以下修改后的 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;
}

【讨论】：

【解决方案3】：

将“word-break:break-all;”属性添加到“

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

这是正常工作的小提琴： http://jsfiddle.net/Lu50tLmf/4/

【讨论】：