表のセルで「overflow: hidden」が機能しないのはなぜですか?どうすれば修正できますか?-CSSチュートリアル-php.cn

表のセルで「overflow: hidden」が機能しないのはなぜですか?どうすれば修正できますか?

Linda Hamilton

リリース： 2024-12-07 14:54:16

オリジナル

244 人が閲覧しました

Why Doesn't `overflow: hidden` Work in a Table Cell and How Can I Fix It?

表のセルでオーバーフローが機能しない理由

表のセルの幅を制限しようとすると、オーバーフロー: 隠しプロパティでは、スペースのないテキスト文字列によるテーブルの展開を防ぐことができないことがよくあります。この問題は、表と表のセル要素に CSS プロパティの組み合わせを実装することで解決できます。

解決策:

テキストの端で切り取られるようにするには表のセルを展開するのではなく、次のコードを適用します。プロパティ:

テーブル要素:
- テーブルレイアウト:固定
テーブルセル要素:
- オーバーフロー: 非表示
- 空白: nowrap

例:

以下は、の正しい使用法を示す更新された例です。これらのプロパティ:

 box-sizing: border-box;<br>}<br>table {<br> テーブルレイアウト: 固定;<br> ボーダー折りたたみ: 折りたたみ;<br> 幅: 200px;<br>}<br>td {<br> 背景: #F00;<br> パディング: 20px;<br> オーバーフロー: 非表示;<br> ホワイトスペース: nowrap;<br> ボーダー: 実線 1px # 000;<br> 幅: 100%;<br>}<br>}</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <tbody><pre class="brush:php;toolbar:false"><tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>

ログイン後にコピー

以上が表のセルで「overflow: hidden」が機能しないのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。