Need clean truncation of text for showing more-less

Using this javascript to show more-less, is there a simple way to make the text cut off clean so that it displayes whole lines of text (doesn't slice them horizontally)?

            <div id="description" style="height: 20px; overflow: hidden">开发者_JAVA百科
                    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;
            });

If it makes it easier I can truncate on <br /> tags.

Change 20px to a value in ems, such as 2em. One em is (approximately?) equal to the height of one line. You should also set the margin and padding on the p tag in ems.