cssは単行を実現し、複数行が表示省略記号を超えて火狐と互換性がある.

css単行、超えた部分に省略記号を表示

p{
   overflow:hidden;//      
   text-overflow:ellipsis;//         
   white-space:nowarp;//     
 }

補足:white-spaceは、主に要素内のテキストの空白、改行、および折り返しを許可するかどうかを処理するために使用されます.オプションの値には、normal(デフォルト)、pre、nowrap、pre-wrap、pre-lineが含まれます.word-wrapは、ブラウザが単語内でブレークを許可するかどうかを示すために使用され、文字列が長すぎて自然なブレークポイントが見つからない場合にオーバーフロー現象が発生することを防止するために使用されます.オプションの値break-word word-breakは、単語内のブレークスルーをどのように行うかを示すために使用されます.デフォルトはnormal、オプションはbreak-all、keep-allです.
cssマルチラインテキストが表示省略記号を超えています

p{
  overflow:hidden;//      
  text-overflow:ellipsis;//         
  display:-webkit-box;//               
  -webkit-box-orient:vertical;//                 
  -webkit-box-clamp:2//      ，      
}

だから火狐では-webkit-box-clamp:2は有効ではありません
火狐の複数行のテキストが省略記号を表示していません
まずスタイルコードを火狐だけで有効にするには

@-moz-documentc url-prefix(){
  p{
    position: relative; 
    line-height: 20px;
    max-height: 40px;//      ，  overflowhidden，     ，       
    overflow: hidden;
   }
   p::after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;//      ，      ，   ...      
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);//                 
  }
}

原理は自分で...最後の行の末尾に置くことです.