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属性。

允许长词能够破解并换行到下一行

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

Answer 2

添加＆＃34; word-break:break-all;＆＃34;财产到＆＃34;

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

＆＃34;

这是工作小提琴： 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;
}

如何用两个50％的表格单元来破解一个单词？

3 个答案: