html - テキストのN行目から始まる`text-overflow`を適用する方法は?

Question

w3schools.com/cssref/css3_pr_text-overflow.asp

div を作成し、その中のテキストを通常どおりに折り返す方法はありますが、特定の行 (2 行目など) までのみにし、それ以降はtext-overflow: ellipsisプロパティを有効にして、上記のようにその div の残りのテキストを非表示にしますリンク？

Answer 1

個人的には、まさにあなたが望むものを行う Trunk8 プラグインを使用しています。デモをご覧ください

たとえば、使用するプラグインの場合：

$('#div').trunk8({
  lines: 2
});

プラグインリンク

Answer 2

純粋な CSS の回避策として、text-overflow複数行のテキストを意図していないため、テキスト コンテナーの幅と行の高さを固定し、テキストが非表示になる場所を制御している場合は、ハックを使用できます。

シミュレートするための CSS text-overflow:

div{
    width:55%;
    padding:20px;
    line-height:20px;
    height:20px; /*for showing 2 lines of text*/
    overflow:hidden;
    position:relative;
}

div:after{
    content:"...";
    position:absolute;
    bottom:0;
    right:10px;
}

このデモを参照してください: http://jsfiddle.net/kfJAy/

Answer 3

あなたがしたいことのためのcssはありませんが、可能な回避策はこれです：

.ellipsis{
    line-height: 10px; //10px for easy multiplication
    height: 30px; //line-height * n
    text-overflow: ellipsis;
}