CSS はテキストの自動切り詰めを実装します overflow_html/css_WEB-ITnose

Web フロントエンド開発において、よく対処される状況は「テキスト オーバーフロー」です。より親切な対処方法は、オーバーフロー テキストを表示せず、最後に「...」を追加することです。実装方法には、バックエンド プログラムの直接の切り捨て、フロントエンドの JS の切り捨て、CSS の切り捨てなど、さまざまな方法があります。 CSSのtruncationの方法を紹介します。

メイン コードは 3 つの属性で構成されており、そのうちの 1 つは必須です:

          overflow: hidden;      white-space: nowrap;      text-overflow: ellipsis;    

以下は Chrome での効果です:

注: IE6 は幅 を指定する必要があります。オンラインデモ効果をご覧いただけます。

異なるシステムの異なるブラウザ (主に IE) では、「...」は異なる効果を表示することにも注意してください (異なるブラウザでオンライン デモを表示できます)。また、記事型のウェブサイトでは、「…」を大量に表示することも効果が低く、リストにはある程度の文字数の字幕を使用するのが最善の方法です。