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

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

目標は、表セルに CSS テキスト オーバーフローを実装し、テキストが範囲を超えることを保証することです。セルの幅は省略記号で切り取られ、複数に折り返されないようにします。 Lines.

試行:

最初の試行は次の CSS を使用して行われました:

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

ただし、white-space: nowrap プロパティテキストとそのセルが右に無限に拡張され、表を超えてしまうcontainer.

解決策:

目的の効果を実現するには、表のセルごとに max-width CSS プロパティを設定する必要があります。以下に例を示します。

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

最大幅を設定すると、オーバーフローが指定された幅内に収まるようになります。

レスポンシブ レイアウト:

レスポンシブ レイアウトの場合は、max-width を使用して列の最小幅を指定するか、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 に関する考慮事項:

IE 9 以前の場合、次の HTMLレンダリングの問題を解決するにはハックが必要です:

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

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