テキストオーバーフロー省略記号を設定する方法

免責事項:この記事はブロガーオリジナル記事ですが、許可ブロガーなく再生してはなりません。https://blog.csdn.net/hua_ban_yu/article/details/83022953

フロントエンドの開発では、単一のライン楕円を使用することができ、それを直接テキスト省略記号の複数の行を設定する方法を、次に、設定CSS?

あなたは互換性の問題を考慮していない場合は、直接次のCSSの設定を使用することができます。

overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 3;

しかし、開発プロセスのすべての主要なブラウザと互換性がある必要がありますが、今のCSSスタイルは、マルチラインセットの省略記号をサポートすることはできませんが、最善の方法は、複数行の省略記号を設定するためのjsのコードを使用することです。(あなたは、ダウンロードに直接行くことができますlineEllipsis .jsファイル   https://github.com/lianglijie/lineEllipsis

使用lineEllipsisは複数行表示の省略記号を設定します。

$lineEllipsis({
id:objId, //要设置多行省略号标签的id
rows:3 //设置超出多少行后显示省略号,默认为两行
})

後に有効に設定します。

lineEllipsisの .jsファイル省略記号の複数のラインを設定するには、純粋なJavaScriptコードで、あなたがダウンロードできるlineEllipsis .jsファイルを、次に$ lineEllipsis()の呼び出しを使用

おすすめ

転載: blog.csdn.net/hua_ban_yu/article/details/83022953