如何强制表格单元格内的文本换行？

如何在表格单元格内强制文本换行

问题

在某些单元格中包含冗长文本的数据表中，单元格单向展开而不是单向展开环绕文本。实现了 CSS 类（可包装），但问题仍然存在。该表格包含在 div 中，引发了 div 和表格宽度操作是否必要的问题。

解决方案

要强制表格单元格内的文本换行，请使用以下 CSS 属性：

<code class="css">table {
  table-layout: fixed;
}

td {
  word-wrap: break-word;
}</code>

说明：

• table-layout：固定确保所有列的宽度固定，防止单元格水平扩展。
• word-wrap：当单词太长而无法适应列宽时，break-word 会导致文本中断并换行到下一行。

示例

这里是一个示例来说明解决方案：

<code class="html"><style>
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 310px;
  }

  td {
    border: solid 1px #fab;
    width: 100px;
    word-wrap: break-word;
  }
</style>

<table border="1">
  <tr>
    <td>1</td>
    <td>Lorem Ipsum</td>
    <td>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry.
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown
    </td>
    <td>
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td></td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna...
    </td>
  </tr>
</table></code>

结论

通过实现 table-layout:fixed 和 word-wrap:break-word，您可以轻松地在表格单元格内强制文本换行，确保无论文本长度如何，表格布局都保持一致和可读。

以上是如何强制表格单元格内的文本换行？的详细内容。更多信息请关注PHP中文网其他相关文章！