首頁 > web前端 > css教學 > 如何強製表格儲存格內的文字換行?

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

DDD
發布: 2024-10-27 02:48:30
原創
455 人瀏覽過

How to Force Text Wrap Within Table Cells?

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

問題

在某些儲存格中包含冗長文字的資料表中,儲存格單向展開而不是單向展開環繞文字。實現了 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板