如何讓表格單元格換行 HTML 內容？-css教學-PHP中文網

如何讓表格單元格換行 HTML 內容？

Linda Hamilton

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

原創

778 人瀏覽過

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>

登入後複製

範例HTML：

範例HTML ，表格單元格將包裹其內容並避免拉伸。此外，設定表格和儲存格寬度可確保內容適合定義的尺寸。

以上是如何讓表格單元格換行 HTML 內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！