CSS word-wrap 不适用于 table

Question

我需要创建一个固定 headers 的 table，table-body 可滚动到 Y-axis（但不是 X-axis）和列固定宽度。

我找到了这个问题的答案：

它就像一个魅力（非常感谢！），我开始根据这个答案编写我的代码。我添加了 table-layout: fixed、word-wrap: break-word 和 overflow-y: auto; overflow-x: hidden; 来满足我的额外要求。

但是还有一个问题。如果在 table 单元格中输入很长的文本，没有（或只有很少的）空格，则不会添加换行符，但宽度会通过蛮力改变，table 行是 "making room" 一个大条目，将其他单元格推到两边。

我在 SO 上找到了答案和建议，其中说我可以将 <wbr> 标记添加到内容中，从而建议浏览器何时制作 line-breaks。这里的问题是内容是从数据库中检索的（通过 C#），然后需要在显示之前进行处理，如果可能的话，我想跳过这一步。如果有什么办法，我想把这个放在CSS里。但是，如果没有其他可能性，我也很愿意接受其他解决方案。
我也试过break-all，结果一样。

这是我目前的 CSS table:

    table.tableSection {
    display: table;
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100px;
}
table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

这是 HTML 代码：

<table class="tableSection">
<thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
    <tr>
        <td>Text</td>
        <td>This does work very well with blank spaces. The text has no limitation in size, line breaks will simply be added.</td>
        <td>Text</td>
    </tr>
    <tr>
        <td>Text</td>
        <td>This_does_not_work_sadly,_which_is_a_huge_problem,_since_blank_spaces_are_not_permitted_as_word_delimiters.</td>
        <td>Text</td>
    </tr>
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</tbody>

这是我的 jsfiddle 的 link 来演示我的意思：https://jsfiddle.net/Fi_Vi/bmc7r8rz/3/

Answer 1

我会使用简单的：

table.tableSection th, table.tableSection td {
  float: left;
  width: 33%;
  word-wrap: break-all;
}

Answer 2

将以下代码添加到您的 td 的 CSS 样式 table.tableSection th, table.tableSection td { ... }

word-break: break-all;

这是更新后的 fiddle： https://jsfiddle.net/bmc7r8rz/8/

CSS word-wrap 不适用于 table

CSS word-wrap does not work in table

html

css

word-wrap