如何强制 table 行断字？

Question

我有以下元素层次结构：

而且，这是效果图：

我想摆脱水平滚动并用分词替换它（所以，不按单词边界拆分）。

启用此功能的正确 css 设置是什么？

Answer 1

如果我做对了，你要做的是去掉滚动条，保持宽度并只为 .igv-popoverValue 跨度添加一个分词符，也就是右边的跨度边。如果是这样，您可以通过将 .igv-popoverName 浮动到左侧并将 .igv-popoverValue 浮动到右侧并给它们一个宽度以适应它们的列侧来完成此操作，例如 this example

<td class="igv-popover-td">
    <div class="igv-popoverNameValue">
        <span class="igv-popoverName">Name</span>
        <span class="igv-popoverValue">NUP210L</span>
    </div>
</td>

和CSS

.igv-popoverName {
    float: left;
    width: 45px;
}
.igv-popoverValue {
    word-break: break-all;
    float: right;
    width: 45px;
}

如何强制 table 行断字？

How do I force a table row to word-break?

css

html-table