Javascript 如何截断文本，直到；“更多”；链接被点击了吗？

我有一个很长的段落系列，我想把每一段删减到两行（50个字符），当你点击“更多”链接时，它会显示完整的段落

我正在使用原型库和rails

---

理想情况下，我希望将段落分成两个部分，并在单击“更多”时显示另一个部分。或者这是唯一的方法吗？

因为我是一个jQuery的家伙，这里有一些psuedo代码

• 选择包含p的元素
• 在前50个字符后选择，并用“more text”类将div环绕
• 在

  more

• 添加一个单击事件按钮，用于设置

  显示：block

  或

  更多文本上的一些更奇特的内容

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

---

将文本放在div中，并将高度设置为所需高度（溢出：隐藏）。单击“更多”链接时，将div height设置为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>

这里的文本。。。
函数showMore（）{
var mydiv=document.getElementById（'myText'）；
mydiv.style.height=mydiv.scrollHeight；
}
//或使用转换（mootools）
函数showMoreTransition（）{
新的外汇汇率.Tween（$（'myText'）{
持续时间：1000
}).start（'height'，$（'myText'）.getScrollHeight（））；
}

您的跨距有问题吗？似乎最有效的设置方法是将多余部分包装在一个隐藏的span标记中。您甚至可以将整个操作包装在一个好的helper方法中，以使其可重用

假设原型：

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

---

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

在早期的一个项目中，我有一长串被截断的文本，不想将它们全部发送到浏览器。这里需要记住的重要一点是，如果文本可能包含控制或转义字符（例如HTML、BBCode、HTML实体等），则需要特别注意它们

最后，我编写了一个小的HTML标记解析器，以避免交付被切成两半的HTML标记，并在其中添加了结束标记，例如粗体、斜体等，以避免破坏屏幕布局的其余部分

---

此外，这通常不是你想要的——也就是说，对于不同的屏幕宽度，或者当文本中有换行符时，你不会得到两行文字。

这是一种有趣的方法。。。。问题是，如果最后一行被切成两半怎么办？看起来不太好。你可以根据段落的行高来选择高度，这样段落就可以可靠地在行与行之间截断。