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

I have a long series of paragraphs and I'd like to trim each down to 2 lines (50 characters) and when you click a link "more" it will show the full paragraph.

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

I am using the prototype library and rails.

我正在使用原型库和rails。

I'd ideally like to do this with out breaking the paragraph into 2 divs and showing the other when you click on more. Or is that the only way?

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

4 个解决方案

#1

Do you have a problem with spans? It seems the most effective way set this up is to wrap the excess in a hidden span tag. You can even wrap the whole operationin a nice helper method to make it reusable.

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

Assuming prototype:

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

#2

Put your text in a div and set the height to your desired height (with overflow: hidden). When the more link is clicked set the div height to div.scrollHeight . If you're using jquery or mootools you can throw in a neat transition.

将文本放在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>

#3

Because I'm a jQuery guy, here is some psuedo code

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

Select element which contains p

选择包含p的元素

Select after first 50 chars and wrap a div around with a class 'more-text'

在前50个字符后选择并用“更多文本”类包装div

Insert with Js after a <button>more</button>

在

Add a click event button that sets display: block or something more fancy on the more-text

添加一个单击事件按钮,在更多文本上设置display:block或更多花哨的东西

Remove button or change it's text to 'less' and change necessary code

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

#4

The above answers assume that you send the full text to the browser, then let it only display a certain amount of it by clipping it vertically. This is actually a good idea, as truncating a text afer a certain amount of characters is actually not as straight-forward as it seems.

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

In an early project, I had a long list of truncated texts and didn't want to send them all to the browser in full length. The important thing to keep in mind here is if your text may contain control or escape characters (e.g. HTML, BBCode, HTML-Entities, etc) you need to take special care about them.

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

I ended up writing a small HTML-tag parser to not deliver HTML tags which were cut in half, and to add end-tags to e.g. bold, italic, etc, to not screw up the rest of the screen layout.

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

Additionally, it's usually not what you want - i.e. you won't get two lines worth of text for different screen widths or when having line break characters in your text.

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

#1