純css制御テキストの表示フォーマット

989 ワード

今日の開発では、次のようなニーズに直面しています.
タイトル、最大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...”に达しますの効果