怎么截断的文本直到"更多的"点击链接?

Question

我有一长串的段落和我想修剪每个下降到2线(50字)以及当你点击的链接"更多"，它将显示出充分的段落。

我使用的原型图书馆和轨。

我想喜欢做这个了断裂的段落到2div和表示的其他当你点击更大。或者是唯一的办法?

Answer 1

你有跨度问题吗？设置它的最有效方法似乎是将多余的内容包装在隐藏的span标签中。您甚至可以将整个操作包装在一个好的辅助方法中，以使其可重用。

假设原型：

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并将高度设置为所需的高度（使用overflow：hidden）。单击更多链接时，将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个字符和包裹div周围有一个类的更多文'
• 插入与Js后一个 <button>more</button>
• 增加一个点击事件，设置按钮 display: block 或一些更花哨的 more-text
• 删除或改变它的文本为'低'而改变必要的代码

Answer 4

以上答案假设您将全文发送到浏览器，然后让它仅通过垂直剪切显示一定数量的文本。这实际上是一个好主意，因为在一定数量的字符之后截断文本实际上并不像看起来那么简单。

在早期项目中，我有一长串截断的文本，并且不希望将它们全部发送到浏览器。这里要记住的重要一点是，如果您的文本可能包含控件或转义字符（例如HTML，BBCode，HTML-Entities等），您需要特别注意它们。

我最后编写了一个小的HTML标记解析器，以便不提供切成两半的HTML标记，并将结束标记添加到例如粗体，斜体等，以免搞砸屏幕布局的其余部分。

此外，它通常不是您想要的 - 也就是说，对于不同的屏幕宽度或在文本中包含换行符时，您不会获得两行文本。