CSS自动换行在表中不起作用

我需要创建一个带有固定标题的表格，一个可在Y轴（但不在X轴上）滚动的表格体和固定宽度的列。CSS自动换行在表中不起作用

我发现这个答案，我的问题：https://stackoverflow.com/a/17585032/6033166

它的工作原理就像一个魅力（！非常感谢），我开始在此基础上回答我的代码。我添加了table-layout: fixed,word-wrap: break-word和overflow-y: auto; overflow-x: hidden;以解决我的其他需求。

但是仍有一个问题。如果一个非常长的文本被输入到一个表格单元格中，没有（或很少有）空格，则不会添加换行符，但宽度会因暴力而改变，表格行为“腾出空间”大项目，将其他单元推向两侧。

我发现了关于SO的答案和建议，我可以将<wbr>标记添加到内容中，从而建议浏览器何时进行换行。这里的问题是内容从数据库中检索（通过C＃），然后需要在显示之前进行处理，如果可能的话，这是我想跳过的一个步骤。如果有什么办法，我想保留在CSS中。但是，如果没有其他可能，我也很乐于接受其他解决方案。
我试过也打破所有，相同的结果。

这是我的表当前CSS：

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来证明我的意思：https://jsfiddle.net/Fi_Vi/bmc7r8rz/3/

来源

2016-05-04 F_V

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

word-break: break-all;

这里是更新的小提琴： https://jsfiddle.net/bmc7r8rz/8/

来源

2016-05-04 12:25:49 Kruser

谢谢，完美的作品！我的错误与'文字中断：全部打破';'是我把它放到'table.tableSection'中。 –

我会用简单的：

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

来源

2016-05-04 12:24:15 thepio

CSS自动换行在表中不起作用

回答

相关问题