移動端のtext-overflowマルチラインテキストオーバーフロー表示省略記号(...)

text-overflow:ellipsis属性で単行テキストのオーバーフロー表示省略記号(...)を実現することはよく知られているはずです.もちろん、一部のブラウザでは、幅widthのプロパティが必要です.

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

しかし、このプロパティでは、複数行のテキストオーバーフロー表示省略記号はサポートされていません.ここでは、アプリケーションシーンに基づいていくつかの方法を紹介して、このような効果を実現します.
WebKitブラウザまたはモバイル端末のページ
WebKitブラウザまたはモバイル端末(ほとんどがWebKitカーネルのブラウザ)のページ実装は比較的簡単で、WebKitのCSS拡張属性(WebKitはプライベート属性)-webkit-line-clampを直接使用することができる.注意:これはCSS仕様草案に表示されない非仕様属性です(unsupported WebKit property).-webkit-line-clampは、1つのブロック要素に表示されるテキストの行数を制限するために使用される.この効果を達成するには、他のWebKitプロパティを組み合わせる必要があります.共通の結合プロパティ:

display: -webkit-box;が結合しなければならない属性は、オブジェクトを弾性伸縮ボックスモデルとして表示します.

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

text-overflow: ellipsis;で、複数行のテキストに使用できる場合は、省略記号「...」で範囲外のテキストを非表示にします.

overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;このプロパティは、WebKitブラウザまたはモバイル端末(ほとんどがWebKitカーネル)ブラウザに適しています.具体例では、http://www.css88.com/webkit/-webkit-line-clamp/を参照してください.
ブラウザ間互換性のあるシナリオ
比較的信頼できる簡単な方法は、相対的に位置決めされた容器の高さを設定し、省略記号(...)を含む要素でシミュレーションすることです.例:

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://www.css88.com/wp-content/uploads/2014/09/ellipsis_bg.png) repeat-y;

}

ここでは、いくつかの点に注意してください.

heightの高さはline-heightの3倍ですね.

終了の省略は、半透明のpngで薄くする効果や、背景色を設定することができます.

IE 6-7はcontentのコンテンツを表示しないので、互換性を持たせるには、...でシミュレーションするなど、コンテンツにラベルを追加することができる.

はIE 8をサポートするために、::afterを:afterに置き換える必要がある.

JavaScriptスキーム
jsでも上記の考え方に基づいてシミュレーションすることができ、実現も簡単で、似たような仕事をする成熟したツールをいくつかお勧めします.
1.Clamp.js
ダウンロードおよびドキュメントアドレス:https://github.com/josephschmitt/Clamp.js使用も簡単です.

var module = document.getElementById("clamp-this-module");

$clamp(module, {clamp: 3});

2.jQueryプラグイン-jQuery.dotdotdot
これも使いやすいです.

$(document).ready(function() {

 $("#wrapper").dotdotdot({

     //    configuration goes here

 });

});