表のセル内でテキストを強制的に折り返すにはどうすればよいですか?-CSSチュートリアル-php.cn

表のセル内でテキストを強制的に折り返すにはどうすればよいですか?

DDD

リリース： 2024-10-27 02:48:30

オリジナル

452 人が閲覧しました

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>

ログイン後にコピー

説明:

テーブルレイアウト:固定により、すべての列の幅が固定され、セルが水平に拡張されなくなります。
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>

ログイン後にコピー