Html 如何用两个50%的表格单元格分隔一个单词？

我试图在两个50%宽度的单元格中拆分长单词。 我已经试过了

wordwrap:break-word但这没有帮助

HTML

Jsfiddle：

它破坏了整个元素的大小，如果单词太长，它就太大了。如何修复此问题？
您可以使用
分词属性

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

在
.table left、.table right
中：

删除
显示：表格单元格

添加
分词：全部分词

更改为：

.table-wrapper {
    display:table;
    border-collapse:separate;
    border-spacing:5px 5px;
    width: 100%;
}

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

添加“
单词中断：全部中断；
“属性到”

"

这是工作小提琴：
使用下面修改的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;
}

起飞<代码>显示：表格单元格和
换行：断开单词将起作用。
.table-wrapper {
    display:table;
    border-collapse:separate;
    border-spacing:5px 5px;
    width: 100%;
}

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

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

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