＆＃8220; more＆＃8221;までテキストを切り捨てる方法リンクがクリックされましたか？

Question

長い段落がありますが、各行を2行（50文字）にトリムし、リンクをクリックすると、「もっと」と表示されます。段落全体が表示されます。

プロトタイプライブラリとレールを使用しています。

理想的には、段落を2つのdivに分割せずに、さらにクリックしたときにもう1つのdivを表示することなくこれを実行したいと思います。またはそれが唯一の方法ですか？

Answer 1

スパンに問題がありますか？これを設定する最も効果的な方法は、隠されたスパンタグで余分な部分をラップすることです。操作全体を素敵なヘルパーメソッドでラップして、再利用可能にすることもできます。

プロトタイプを想定：

def sample_with_more(body, html_options = {})
  more_link = link_to_function(" More...", "$('more').hide(); $('hidden').show();', :id => 'more')


  content_tag(:div, html_options) do 
    body[0..49] + more_link + 
      content_tag(:span, body[50..-1], :style => "display:none", :id => "hidden")
  end
end

Answer 2

テキストをdivに入れ、高さを希望の高さに設定します（オーバーフロー：非表示）。リンクがクリックされたら、divの高さをdiv.scrollHeightに設定します。 jqueryまたはmootoolsを使用している場合、きちんとしたトランジションをスローできます。

<div id="myText" style="overflow:hidden; height:50px;">Text here...</div>
<a href="javascript:;" onclick="showMore()">more</a>

<script type="text/javascript">
function showMore() {
    var mydiv = document.getElementById('myText');
    mydiv.style.height = mydiv.scrollHeight; 
}

// or with a transition (mootools)
function showMoreTransition() {
    new Fx.Tween($('myText'), {
        duration: 1000
    }).start('height', $('myText').getScrollHeight());
}
</script>

Answer 3

私はjQueryの男なので、ここにいくつかの擬似コードがあります

• pを含む要素を選択
• 最初の50文字の後に選択し、「more-text」クラスでdivをラップします
• ＆lt; button＆gt; more＆lt; / button＆gt;
の後にJsを挿入
• display：block または more-text
をさらに派手に設定するクリックイベントボタンを追加します。
• ボタンを削除するか、テキストを「less」に変更し、必要なコードを変更します

Answer 4

上記の回答は、ブラウザに全文を送信し、垂直方向にクリップすることにより、一定量だけ表示することを想定しています。これは実際には良い考えです。テキストの一部を切り捨てるのは実際には見かけほど簡単ではありません。

初期のプロジェクトでは、切り捨てられたテキストの長いリストがあり、それらをすべて完全にブラウザーに送信したくありませんでした。ここで覚えておくべき重要なことは、テキストに制御文字またはエスケープ文字（HTML、BBCode、HTMLエンティティなど）が含まれている可能性がある場合、特に注意する必要があることです。

私は小さなHTMLタグパーサーを作成して、半分にカットされたHTMLタグを配信せず、エンドタグを追加します。太字、斜体など、画面レイアウトの残りを邪魔しないようにします。

さらに、通常は望んでいるものではありません。つまり、画面の幅が異なる場合や、テキストに改行文字が含まれている場合、2行分のテキストは表示されません。