如果内容超出指定的跨度高度，请添加阅读更多链接

Question

我在span标记中有一个pre标记，它有几行内容（内容来自数据库的运行时），

<span height="30px;">
<pre>  
    Line-1 content
    Line-2 content
    Line-3 content
    Line-4 content
    Line-5 content
    Line-6 content
    Line-7 content
    Line-8 content
    Line-9 content
</pre> 
</span>

我已将跨度的高度指定为＆＃34; 30px＆＃34;。现在我想要的是，如果内容超过我的跨度高度＆＃34; 30px＆＃34;，那么我的js将在span内容的末尾添加一个readmore链接。所以应该呈现这样的东西：

<span>
<pre>  
    Line-1 content
    Line-2 content
    Line-3 content
    Line-4 content
    Line-5 content..<a href="wholeContent.html">Readmore</a>
</pre> 
</span> 

我试过这个，我想出了这个解决方案，但这是在没有的基础上增加一个readmore链接。字符，但我想在高度的基础上这样做：

var k = 1;
        $('.spanContent pre').each(function (event) {
            var max_height = 285;
            console.log($(this).height());
            if ($(this).height() > max_height) {
                var id = $(this).attr("id");
                var short_content = $(this).html().substr(0, 200);
                var long_content = $(this).html();
                $(this).html(short_content +
                             '<a href="#" class="read_more"  onClick="showPopup(' + id + ');">...Read More</a>' +
                             '<span class="more_text" style="display:none;">' + long_content + '</span>');
                k++;
            }
        });

我们将非常感谢您对此问题的解决方案。谢谢！