javascript - 需要干净 chop 文本以显示更多 - 更少

Question

使用这个 javascript 来显示 more-less，是否有一种简单的方法可以使文本干净利落地显示整行文本(不水平切片)？

            <div id="description" style="height: 20px; overflow: hidden">
                    Lots of text.
            </div>
            <a href="#" id="more-less">Show more/less>></a>
            <script>
            var open = false;
            $('#more-less').click(function() {
                if (open) {
                    $('#description').animate({height:'20px'}); 
                }
                else {
                    $('#description').animate({height:'100%'});
                }
                open = !open;
            });

如果这样更容易，我可以在 <br /> 上 chop 标签。

Answer 1

将20px改成ems的值，比如2em。一个 em(大约？)等于一行的高度。您还应该在 ems 中的 p 标记上设置边距和填充。