表のセルで HTML のコンテンツをラップする方法

表のセルの折り返し問題への対処

HTML では、通常、表のセル () はデフォルトでコンテンツを折り返さない。強制的に折り返すには、CSS スタイルを変更する必要があります。

解決策:

テーブル セルのコンテンツを確実に折り返すには、次のスタイルを追加します。

• テーブルの CSS: テーブル レイアウトの設定: 固定; table 要素に追加して列幅を定義し、コンテンツが伸びるのを防ぎます。
• 表セルの CSS: ワードラップを適用: ブレークワード;セル内の長い単語を区切ります。

コード例:

<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>

これらの CSS ルールを適用すると、表のセルはコンテンツをラップし、引き伸ばされなくなります。さらに、テーブルとセルの幅を設定すると、コンテンツが定義されたサイズ内に収まるようになります。

以上が表のセルで HTML のコンテンツをラップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。