マルチテキスト省略ソリューション

WebKitブラウザまたはモバイル端末のページは、WebKitブラウザまたはモバイル端末(ほとんどがWebKitカーネルのブラウザ)のページで実現するのが簡単で、WebKitのCSS拡張プロパティ(WebKitはプライベートプロパティ)-webkit-line-clamp；注意:これは非仕様のプロパティ(unsupported WebKit property)であり、CSS仕様草案には表示されません.
-webkit-line-clamp
1つのブロック要素に表示されるテキストの行数を制限します.この効果を達成するには、他のWebKitプロパティを組み合わせる必要があります.一般的な結合プロパティ:1.display: -webkit-box;は、オブジェクトを弾性伸縮ボックスモデルとして表示するために結合する必要があります.2.-webkit-box-orient;が結合しなければならない属性は、伸縮ボックスオブジェクトのサブエレメントの配置方法を設定または検索する.3.text-overflow: ellipsis;で複数行のテキストを使用できる場合、省略記号「...」で範囲外のテキストを非表示にします.
cssコード:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

しかし、このプロパティでは、複数行のテキストオーバーフロー表示省略記号はサポートされていません.ここでは、アプリケーションシーンに基づいていくつかの方法を紹介して、このような効果を実現します.
WebKitブラウザまたはモバイル端末のページ
WebKitブラウザやモバイル端末(ほとんどがWebKitカーネルのブラウザ)のページで実現するのは簡単で、WebKitのCSS拡張属性(WebKitはプライベート属性)-webkit-line-clampを直接使用することができます.注意:これはCSS仕様草案に表示されない非仕様属性です.
-webkit-line-clamp
1つのブロック要素に表示されるテキストの行数を制限します.この効果を達成するには、他のWebKitプロパティを組み合わせる必要があります.一般的な結合プロパティ:1.display: -webkit-box;は、オブジェクトを弾性伸縮ボックスモデルとして表示するために結合する必要があります.2.-webkit-box-orient;が結合しなければならない属性は、伸縮ボックスオブジェクトのサブエレメントの配置方法を設定または検索する.3.text-overflow: ellipsis;で複数行のテキストを使用できる場合、省略記号「...」で範囲外のテキストを非表示にします.
cssコード:

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

このプロパティは、WebKitブラウザまたはモバイル端末(ほとんどがWebKitカーネル)ブラウザに適しています.
ブラウザ間互換性のあるシナリオ
比較的信頼できる簡単な方法は、相対的に位置決めされた容器の高さを設定し、省略記号(...)を含む要素でシミュレーションすることです.
cssコード:

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

ここで注意する点は何ですか.heightの高さは本当にline-heightの3倍です.2.终わりの省略は半透明のpngで薄くしたり、背景色を设定したりします.3.IE 6-7はcontentコンテンツを表示しないので、IE 6-7と互換性を持つには、コンテンツにラベルを付けることができます.例えば...シミュレーションを実行します.4.IE 8をサポートするには、:afterを:afterに置き換える必要があります.
JavaScriptスキーム
jsでも上記の考え方に基づいてシミュレーションできます

複数行のテキストが省略記号互換性IE 8を超えている:テキストの長さまたは短さを自動的に判断できる利点がある.

JSコード:

$(".video-list-p").each(function(i){
    var divH = $(this).height();
    var $p = $("span", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});

2.プラグイン:Clamp.jsダウンロードおよびドキュメントアドレス:https://github.com/josephschmitt/Clamp.js

js   ：
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

domeアドレス:https://codepen.io/feiwen8772/pen/AckqK
jQuery.dotdotdotダウンロードおよび詳細ドキュメントアドレス:https://github.com/BeSite/jQuery.dotdotdotまたはhttp://dotdotdot.frebsite.nl/

js   ：
$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //  configuration goes here
    });
});