☰

CSS テキストオーバーフローはテーブルセルで発生しますか? 質問する

tag-icon • tag-icon css overflow
CSS テキストオーバーフローはテーブルセルで発生しますか? 質問する

テーブル セルでCSS を使用してtext-overflow、テキストが長すぎて 1 行に収まらない場合に、複数行に折り返すのではなく、省略記号で切り取るようにしたいのですが、これは可能ですか?

私はこれを試しました:

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

しかし、 はwhite-space: nowrapテキスト (およびそのセル) を右に拡張し続け、テーブル全体の幅がコンテナーの幅を超えてしまうようです。 ただし、 がない場合、テキストはセルの端に達すると複数行に折り返され続けます。

ベストアンサー1

テキストがテーブル セルからオーバーフローしたときに省略記号でテキストをクリップするには、オーバーフローが機能するようにmax-width各クラスの CSS プロパティを設定する必要があります。追加のレイアウト要素は必要ありません。tddiv

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

レスポンシブレイアウトの場合、max-widthCSSプロパティを使用して列の有効最小幅を指定するか、max-width: 0;無制限の柔軟性を得るために を使用します。また、包含テーブルには特定の幅（通常は ）が必要でありwidth: 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 (またはそれ以下) の場合、IE 固有のレンダリング問題を修正するために、HTML にこれを含める必要があります。

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

おすすめ記事