純css制御テキストの表示フォーマット
989 ワード
今日の開発では、次のようなニーズに直面しています.
タイトル、最大1行まで表示することを要求して、超えた部分は省略記号で代わります...
サブタイトルは、最大2行で表示する必要があります.超過部分は省略記号で表示します.
1つ目はcssで明確にサポートされており、3つのプロパティを使用すると簡単に効果が得られます.
これは1行に対して表示されるテキストで、2行または3行に使用できない場合です.
複数行に適用する場合について説明します
上の配置を通じて純粋なcssの方式で効果を達成することができて、また伝統的なjsで制御する方式も1つの簡単な原理の説明をして、開発の過程の中で2行が最大でいくつの文字を置くことができることを確定して、jsはバックグラウンドの伝達した文字を受け入れた後に、文字列に対して行を切り取って更に‘つづりを作って“XXX...”に达しますの効果
タイトル、最大1行まで表示することを要求して、超えた部分は省略記号で代わります...
サブタイトルは、最大2行で表示する必要があります.超過部分は省略記号で表示します.
1つ目はcssで明確にサポートされており、3つのプロパティを使用すると簡単に効果が得られます.
overflow: hidden; //
white-space:nowrap; //
text-overflow:ellipsis; //
これは1行に対して表示されるテキストで、2行または3行に使用できない場合です.
複数行に適用する場合について説明します
overflow:hidden; //
text-overflow:ellipsis; //
display:-webkit-box; //
-webkit-box-orient:vertical; // -
-webkit-line-clamp:2; // 2 ( )
上の配置を通じて純粋なcssの方式で効果を達成することができて、また伝統的なjsで制御する方式も1つの簡単な原理の説明をして、開発の過程の中で2行が最大でいくつの文字を置くことができることを確定して、jsはバックグラウンドの伝達した文字を受け入れた後に、文字列に対して行を切り取って更に‘つづりを作って“XXX...”に达しますの効果