表格单元格中的自动换行

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>

Answer 2

您可以在表格中使用 css 的溢出属性。

overflow:auto;

这适用于所有屏幕尺寸。