divの内部にテキストの束が折り返される行の数をどのように数えることができますか？

Question

私はそこにあるデータベースから読み込まれたテキストを持つdivを持っています。テキストの長さを制御することはできず、ラップする行数を計算またはカウントして、最初に小さなセグメント以外のすべてを非表示にして、ユーザーが「more」をクリックするまで隠すことができます。 javascriptでこれを行う方法はありますか？

ありがとうございます。私のアドバイスで

Answer 1

あなたは、この使用してプログレッシブ・エンハンスメントを行うの2つの方法があります。

1））がそれに改行のための （分割を折りたたむにはJavaScriptを使用して、それのすべてのテキストを書くと、（例えば、Aの配置"..."すべてのdivを表示するリンク）

2）サーバーサイドのhrefリンク "..."を生成すると、クリックするとテキストが展開され、ページ/コンテンツの が "a "リンクを作成し、代わりにajax呼び出しを使用させます。

2番目のオプションを使用します。

Answer 2

divの高さがその中のコンテンツの量によって制御されていると仮定して、divの高さを取得し、それをフォントの行の高さで割り算することができます。

document.getElementById('my_div').offsetHeight; 

と

document.getElementById('my_div').style.lineHeight; 

Answer 3

overflow: hiddenを持つ要素を使用し、彼らはより多くのをクリックすると、そのスタイルを変更します。

HTML：

<div> 
    <div id='content'>...</div> 
    <div><a id='morebutton'>More</a></div> 
</div> 

はCSS：（jQueryのを使用して）

#content { 
    height: 200px; 
    overflow: hidden; 
} 

JS：

$("#morebutton").click(function() { 
    $("#content").css(overflow: "visible"); 
}