表のセルでテキストのオーバーフロー省略記号を機能させるにはどうすればよいですか?
とらえどころのない省略記号: 表のセルにおける CSS の課題を明らかにする
単純なシナリオを考えてみましょう。幅を制限しながら、表のセル内に長いテキストを表示したいとします。 50ピクセルまで。当然のことながら、これを実現するには CSS プロパティ (text-overflow: ellipsis、white-space: nowrap、および設定された幅) を使用します。しかし、驚いたことに、省略記号がどこにも見つからず、困惑するでしょう。
問題を理解するために、CSS 仕様を詳しく見てみましょう。 text-overflow プロパティはインライン要素に影響しますが、表のセルはデフォルトでは影響を受けません。省略記号を有効にするには、テーブルのセルに対して display: block または display: inline-block を明示的に設定する必要があります。これにより、インラインのような動作が許可され、text-overflow プロパティが有効になります。
あるいは、別のアプローチを選択することもできます。 table-layout を設定することで: 固定;テーブルの場合、その幅を指定すると、セル全体に幅が強制的に均等に分散されます。これにより、セル内の省略記号も効果的に有効になります。
これらのソリューションを使用したコードは次のようになります:
1 2 3 4 5 6 7 8 |
|
または
1 2 3 4 5 6 7 8 9 10 |
|
これらのソリューションのいずれかを実装すると、問題を解決し、省略記号が表のセル内で意図したとおりに機能できるようにします。
以上が表のセルでテキストのオーバーフロー省略記号を機能させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

Lea verou' conic-gradient()Polyfillの機能のリストに目を向けたことの1つが最後の項目でした。

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

インラインテンプレートディレクティブにより、既存のWordPressマークアップに対する進行性の強化として、リッチVUEコンポーネントを構築できます。

PHPテンプレートは、多くの場合、サブパーコードを促進するために悪いラップを取得しますが、そうである必要はありません。 PHPプロジェクトが基本を実施する方法を見てみましょう

新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います
