表のセルでテキストのオーバーフロー省略記号を機能させるにはどうすればよいですか?

とらえどころのない省略記号: 表のセルにおける CSS の課題を明らかにする

単純なシナリオを考えてみましょう。幅を制限しながら、表のセル内に長いテキストを表示したいとします。 50ピクセルまで。当然のことながら、これを実現するには CSS プロパティ (text-overflow: ellipsis、white-space: nowrap、および設定された幅) を使用します。しかし、驚いたことに、省略記号がどこにも見つからず、困惑するでしょう。

問題を理解するために、CSS 仕様を詳しく見てみましょう。 text-overflow プロパティはインライン要素に影響しますが、表のセルはデフォルトでは影響を受けません。省略記号を有効にするには、テーブルのセルに対して display: block または display: inline-block を明示的に設定する必要があります。これにより、インラインのような動作が許可され、text-overflow プロパティが有効になります。

あるいは、別のアプローチを選択することもできます。 table-layout を設定することで: 固定;テーブルの場合、その幅を指定すると、セル全体に幅が強制的に均等に分散されます。これにより、セル内の省略記号も効果的に有効になります。

これらのソリューションを使用したコードは次のようになります:

<code class="css">td {
  display: block; /* or inline-block */
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

または

<code class="css">table {
  table-layout: fixed;
  width: 150px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

これらのソリューションのいずれかを実装すると、問題を解決し、省略記号が表のセル内で意図したとおりに機能できるようにします。

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