如何让表格单元格换行 HTML 内容？-css教程-PHP中文网

如何让表格单元格换行 HTML 内容？

Linda Hamilton

发布： 2024-10-27 14:24:02

原创

777 人浏览过

How to Make Table Cells Wrap Content in HTML?

解决表格单元格换行问题

在 HTML 中，表格单元格 (

) 默认情况下通常不会换行其内容。要强制它们换行，我们需要修改 CSS 样式。

解决方案：

要确保表格单元格内容换行，请添加以下样式：

表格 CSS： 设置表格布局：固定；在表格元素上定义列宽并防止内容拉伸。
表格单元格的 CSS： 应用自动换行：break-word;分解单元格内的长单词。

代码示例：

<code class="css">table {
  border-collapse: collapse;
  table-layout: fixed;
  width: <table_width>;
}

table td {
  border: 1px solid #ccc;
  width: <td_width>;
  word-wrap: break-word;
}</code>

登录后复制

示例 HTML：

<code class="html"><table>
  <tr>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
    <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</td>
  </tr>
</table></code>

登录后复制

通过应用这些 CSS 规则，表格单元格将包裹其内容并避免拉伸。此外，设置表格和单元格宽度可确保内容适合定义的尺寸。

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