なぜ `overflow: hidden` が ` 要素でテキストを切り詰めないのか?

オーバーフロー非表示 では無効ですか?

問題:
A 固定幅であるはずのセルが余分なテキストでオーバーフローし、セルの境界が拡張されます。

解決策:
セル内でテキストの切り詰めを強制するには、CSS プロパティの組み合わせが必要です。

1. テーブルレイアウト:修正済み

   • テーブルの幅が静的なままであることを確認します。

2. オーバーフロー: 非表示 on

   • 溢れ出る隠れ物text.

3. white-space: nowrap on

   • テキストがテキスト内で折り返されないようにします。 cell.

例 (固定幅列):

 ボックス サイズ: border-box;<br>}<br>table {<br> table-layout: 固定;<br> border-collapse: 折りたたみ;<br> width: 100%;<br> max-width: 100px;<br>}<br>td {<br> 背景: #F00;<br> パディング: 20px;<br> オーバーフロー: 非表示;<br> ホワイトスペース: nowrap;<br> 幅: 100px;<br> ボーダー: 実線 1px #000;<br>}

 <tbody></p>
<pre class="brush:php;toolbar:false"><tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>
<tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>

以上がなぜ `overflow: hidden` が ` 要素でテキストを切り詰めないのか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css Static class overflow padding border background column table tbody td

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。