如何強製表格儲存格內的文字換行？

如何在表格單元格內強製文字換行

問題

在某些儲存格中包含冗長文字的資料表中，儲存格單向展開而不是單向展開環繞文字。實現了 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>結論

透過實作table-layout:fixed 和word -wrap:break-word，您可以輕鬆地在表格單元格內強製文字換行，確保無論文字長度如何，表格佈局都保持一致和可讀。

以上是如何強製表格儲存格內的文字換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！