CSS は長い文字列を切り詰めて省略記号を確実に表示できますか?

CSS は長い文字列を切り詰めることはできますか?

HTML と CSS のみを使用してテキストを切り詰めることは可能で、動的コンテンツを事前定義された文字列内に収めることができます固定幅と固定高さのデザイン?

歴史的に、テキストは切り詰められていました推定文字数に基づいてサーバー側で実行されました。ただし、文字の幅が異なるため、このアプローチは信頼できませんでした。この問題に対処するために、実際に表示されるテキストの幅を決定できるブラウザベースのソリューションが模索されました。

当初、IE の text-overflow: ellipsis プロパティが潜在的な解決策として特定されました。ただし、この機能は他のブラウザ、特に Firefox ではサポートされていませんでした。

overflow: hidden などのテクニックを使用した、CSS ベースのさまざまな回避策が登場しました。ただし、これらの方法では、省略記号インジケーターの表示に失敗するか、テキストが切り詰められない場合でも省略記号インジケーターが表示されます。

潜在的な解決策として、Justin Maxwell は、非表示の ellipsis.xml を使用するクロスブラウザー CSS テクニックを提案しました。ファイル。この方法は、省略記号を使用してテキストを効果的に切り詰めますが、Firefox でテキストを選択できなくなるという欠点があります。

更新された解決策

2011 年の Firefox 7 のリリースにより、 text-overflow: ellipsis プロパティのサポートが広く普及し、回避策の必要性がなくなりました。このプロパティにより、省略記号インジケーターを使用してテキストを正確に切り詰めることができます。

さらに、Firefox でのサポートを維持しながら、切り詰められたノードのコンテンツを更新する技術が開発されました。これには、コンテンツが変更されるたびに、replaceEllipsis 関数を使用してノードを複製し、置き換えることが含まれます。

以上がCSS は長い文字列を切り詰めて省略記号を確実に表示できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。