css - 表格单元格中的自动换行

Question

我尝试在表格单元格中应用自动换行，但它不起作用。

如果文件名包含空格则换行，但如果没有空格我的表将超出 div。

我还尝试了表格单元格的自动换行和宽度属性。

display: table-cell;
width: 50%;
word-wrap: break-word;

它适用于以像素为单位的固定宽度，但我不能那样做，因为我需要管理所有宽度设备的设计。

如果表格单元格没有更多的增长空间，我可以应用什么 css 来进行自动换行？

谢谢

Answer 1

使用word-break:break-all代替word-wrap: break-word;

display: table-cell;
width: 50%;
word-break:break-all;

td {
  width:33.3%;
  word-break:break-all;
}

<table>
<tr>
  <td>largcontent_without_sapce_large_content_without_space</td>
  <td>Samll Content</td>
  <td>Test Content</td>
</tr>
<tr>
  <td>largcontent_without_sapce_large_content_without_space_content_without_space</td>
  <td>Samll Content</td>
  <td>Test Content</td>
</tr>
<tr>
  <td>largcontent_without_sapce_large_content_without_space</td>
  <td>Samll Content</td>
  <td>Test Content</td>
</tr>
</table>