css強制改行および非表示実装(単行および複数行)

通俗的な解釈:
 word-break:break-all;英語にのみ作用し、アルファベットを改行根拠word-wrap:break-word;英語だけに役立ち、単語を改行としてwhite-space:pre-wrap;中国語のみに作用し、white-space:nowrapを強制改行する.強制的に改行しないで、すべてwhite-space:nowrap;overflow:hidden; text-overflow:ellipsis;改行せず、部分的に非表示になり、省略記号で表示されます(一部のブラウザでサポートされています)
ケース:ケースにはコメントがあります.

    

    

    

    

    



    
    

        

                     ，         ，                 ，         ，                 ，         ，       
        
        

            we are come from a world,we have us dream,wo never give up us deram;
        
        

            we are come from a world,we have us dream,wo never give up us deram;
        
    
    
    

        

                     ，         ，                 ，         ，                 ，         ，       
        
        

            we are come from a world,we have us dream,wo never give up us deram;
        
        

            we are come from a world,we have us dream,wo never give up us deram;
        
    

-webkit-line-clampは、1つのブロック要素に表示されるテキストの行数を制限するために使用されます.この効果を達成するには、他のWebKitプロパティを組み合わせる必要があります.一般的な結合プロパティ:

display:-webkit-box;オブジェクトを伸縮ボックスモデルとして表示するには、結合する必要があります.

-webkit-box-orientが結合しなければならない属性は、伸縮ボックスオブジェクトのサブ要素の配列方法を設定または取得します.

しかし、火狐ブラウザと互換性を持つために、cssとjsを結合する方法で実現する.
次に、実装の手順を示します.

    
    
    
    




    
                  ，      ;      ;      ;      ;      ;      
    
                  ，      ;      
    
                  ，      


    let ct=document.querySelectorAll(".content");
    for(let i=0;i<ct.length;i++){  //                class 
        if(ct[i].offsetHeight>50)
        {
            ct[i].classList.add('contentHide');
        }
    }
    

 
もう1つの方法はjsで最初の何文字を直接切り取ってレンダリングすることですが、この方法では誤差が大きく、