CSS を使用して表のセル内のテキストを適切に切り詰める方法

CSS Text-Overflow を使用した表のセル内のテキストの切り詰め

Web デザインでは、表のセルの幅を超えるテキストを処理する必要があります。が頻繁に発生します。 CSS を使用すると、簡潔で整理された表のレイアウトを維持しながら、折り返しを防ぐために省略記号でテキストを切り詰めることができます。

問題: CSS オーバーフロー属性とテキスト オーバーフロー属性を適用しようとしても、その中のテキストが表のセルが複数行に折り返され続けるか、表を超えて拡張されるwidth.

解決策: 省略記号を使用してテキストを効果的に切り詰めるには、各テーブル セル (td) クラスの max-width プロパティも設定する必要があります。この制約により、テキストを指定された幅で切り取ることができます。

更新された CSS コードは次のとおりです:

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

応答性を確保するには、max-width: 0px; の使用を検討してください。幅無制限の柔軟性を実現します。また、テーブルを含むテーブルに特定の幅 (通常は幅: 100%;) を設定し、列幅を合計幅のパーセンテージとして定義することもできます。

例:

table { width: 100%; }
td {
  max-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td.column_a { width: 30%; }
td.column_b { width: 70%; }

注: Internet Explorer 9 以前の場合、レンダリングを修正するために次の HTML を追加する必要がある場合があります。問題:

<!--[if IE]>
<style>
  table {
    table-layout: fixed;
    width: 100px;
  }
</style>
<![endif]-->

これらの手順に従うと、省略記号を使用して表のセル内のテキストを効果的に切り詰めることができ、クリーンで制御された表のレイアウトを確保できます。

以上がCSS を使用して表のセル内のテキストを適切に切り詰める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。