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

表のセルで CSS テキスト オーバーフローを使用する方法

表のセルにテキストを表示したい場合があるかもしれません。 , しかし、テキストが長すぎて 1 行に収まりません。テキストを複数行に折り返すのではなく、省略記号 (「...」) でクリップしたいとします。

これを実現するには、「text-overflow」や「text-overflow」などの CSS プロパティを利用できます。 'オーバーフロー'。ただし、「white-space: nowrap」を使用すると、特定の問題が発生する可能性があります。テキストとそのセルが継続的に右に拡張され、意図した表の幅を超えてしまう可能性があります。

この問題を解決するには、各「td」クラスの「max-width」CSSプロパティ。 「max-width」を設定すると、オーバーフロー動作が期待どおりに動作するようになります。

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

レスポンシブ レイアウトでは、「max-width」を使用して列の最小幅を指定できます。あるいは、「max-width: 0」を使用すると、無制限の柔軟性が得られます。また、テーブルを含むテーブルの幅も設定する必要があります (例: 幅: 100%)。各列の幅を合計幅のパーセンテージとして設定します:

table {
  width: 100%;
}

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

td.column_a {
  width: 30%;
}

td.column_b {
  width: 70%;
}

IE 9 (またはそれ以下) に固有のテーブル レイアウトの問題により、追加の HTML コードが必要になる場合があることに注意してください:

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

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