CSS を使用して表のセル内のテキストを省略記号でクリップするにはどうすればよいですか?

CSS を使用して表のセル内の省略記号付きテキストをクリップする

質問:

クリップできますか表のセル内のテキストを複数に折り返す代わりに省略記号を使用する行?

試行された解決策:

CSS プロパティの overflow: hidden、text-overflow: ellipsis、white-space: nowrap の使用は、次のように機能しませんでした。

答え:

表のセルでオーバーフローしたテキストを正常にクリップするには、max-width プロパティを td クラスに追加する必要があります:

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

これは、表の各セルの最大幅を設定し、他のプロパティを適用して、テキストが指定された幅を超えた場合に省略記号でクリップされるようにします。 width.

レスポンシブ レイアウトでは、動的な最大幅を使用できます:

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

さらに、含まれるテーブルには特定の幅が必要です:

table {
  width: 100%;
}

テーブルセル幅はパーセンテージとして設定できます:

td.column_a {
  width: 30%;
}
td.column_b {
  width: 70%;
}

古いバージョンの Internet Explorer (IE 9 または以下)、レンダリングの問題を修正するには、次の追加コードが必要です:

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

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