Question

我有一长串段落，我想将每个段落修剪为2行（50个字符），当您点击“更多”链接时，它将显示完整的段落。

我正在使用原型库和rails。

理想情况下我喜欢这样做而不将段落分成2个div并在你点击更多时显示另一个。或者这是唯一的方法吗？

Answer 1

将文字放入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 2

你有跨度问题吗？设置它的最有效方法似乎是将多余的内容包装在隐藏的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 3

因为我是一个jQuery人，这里有一些伪代码

选择包含p
在前50个字符后选择并使用“more-text”类
在<button>more</button>
添加点击事件按钮，在display: block

more-text

删除按钮或将其文本更改为“更少”并更改必要的代码

Answer 4

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

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

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

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

如何在单击“更多”链接之前截断文本？

4 个答案: