ホームページ  >  記事  >  ウェブフロントエンド  >  CSS はテキストの自動切り詰めを実装します overflow_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-21 09:06:441393ブラウズ

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

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

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

以下は Chrome での効果です:

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。