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

Question

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

我正在使用原型库和rails.

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

Answer 1

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