html - 内容溢出时如何换行？

Question

这是jsfiddle。如您所见，我width:100px为桌子设置了位置。显然，由于标签中的长字符串，当前表格的宽度不是 100px。

我已经使用overflow:hiddenas well as word-wrap:break-word，但在这种情况下没有用。谁能告诉我如何解决这个问题？

我希望长字符串在达到表格的最大宽度时改变行，而不添加垂直滚动条，只需增加<tr>标签的当前高度。

Answer 1

您需要使用word-break，而不是word-wrap：

#convert-result td {
    word-break:break-word;
}

JSFiddle 演示。

此外，您的table元素宽度100px在您提供的代码中设置为，而不是 100%. 您还需要修改它：

#convert-result table {
    ...
    width:100%;
    ...
}

修复了 JSFiddle 演示。

Answer 2

只需使用中断词

#convert-result td {
        word-break:break-word;
}