2行後にテキストを隠す

1行後にテキストを隠すコードスニペットがあります。これを修正して2行後に隠れる方法はありますか？応答する必要があるので、固定された高さまたは幅を設定することは選択肢ではありません。ラインの量を計算することにより、DIVの高さを設定2行後にテキストを隠す

フィドルhttp://jsfiddle.net/AlienWebguy/9t3Z5/3/

HTML

<div id="my_text" class="ellipsis"> 
     Lorem ipsum dolor // lots more text 
</div>

CSS

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
} 

#my_text { 
    font-family:arial; 
    color:#333; 
    font-size:10px; 
    width:80%; 
}

jQueryの

$('#read_more').click(function(){ 
    $('#my_text').toggleClass('ellipsis'); 
});

出典

2016-04-18 Anonymous

これは必要なものです：http://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines – itdoesntwork

@itdoesntworkこれは固定幅/高さに依存します –

「white-あなたの "#my_text"に "高さ"を与えます。しかし、切り捨てられた点は表示されません。 – Atula

。これは、ことによって行うことができ、例えば、divの高さ=（行の高さ* 2）

DEMO http://jsfiddle.net/9t3Z5/465/

var style = $('<style>.ellipsis { height: '+((parseInt($('.ellipsis').css('line-height')) * 2)+'px')+' }</style>'); 
$('html > head').append(style);

に追加することとは対照的に、あなたは、私は原則としてCSSを追加しているがわかります要素そのもの。

出典

2016-04-18 09:24:01 Vector

答えて

関連する問題