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

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

表のセルの幅を制限しようとすると、オーバーフロー: 隠しプロパティでは、スペースのないテキスト文字列によるテーブルの展開を防ぐことができないことがよくあります。この問題は、表と表のセル要素に 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>}<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 サイトの他の関連記事を参照してください。