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

表のセル内でテキストの回り込みを強制する方法

問題

特定のセルに長いテキストを含むデータ表では、セルが一方的に展開されます。テキストを折り返す。 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>

結論

table-layout:fixed と word-wrap:break-word を実装すると、表のセル内でテキストの回り込みを簡単に強制でき、表のレイアウトは、テキストの長さに関係なく一貫性があり、読みやすくなります。

以上が表のセル内でテキストを強制的に折り返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。