表のセルで省略記号を使用して CSS テキストのオーバーフローを実現するにはどうすればよいですか?

表セル内の CSS テキスト オーバーフロー

表セル内でテキスト オーバーフローを実現するのは困難な場合があります。 text-overflow: ellipsis だけでは不十分な場合がありますが、追加の CSS プロパティを使用して目的の効果を実現できます。

解決策

省略記号でテキストをクリップするには、折り返しを防ぐため、各テーブルセル (td 要素) に max-width プロパティを設定します。これは、テキストがクリップされる前に使用できる最大幅を指定します。さらに、overflow: hidden により、余分なテキストが確実に非表示になります。

CSS コード

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

レスポンシブ レイアウト

レスポンシブ レイアウトでは、max-width プロパティを使用して列の有効な最小幅を定義できます。あるいは、max-width: 0 を設定します。無制限の柔軟性が可能になります。テーブルを含むテーブルには特定の幅が必要で、通常は width: 100%; に設定されます。

歴史的メモ

Internet Explorer 9 以前のバージョンでは、追加の <スタイル＞レンダリングの問題を修正するには、HTML にタグを含める必要があります:

以上が表のセルで省略記号を使用して CSS テキストのオーバーフローを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。