首頁  >  文章  >  web前端  >  如何讓表格單元格換行 HTML 內容?

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

Linda Hamilton
Linda Hamilton原創
2024-10-27 14:24:02678瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn