Javascript 如果内容超过指定的跨距高度，请添加“阅读更多”链接

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

第1行内容
第2行内容
第3行内容
第4行内容
第5行内容
第6行内容
第7行内容
第8行内容
第9行内容

我已将跨度高度指定为“30px”。现在我想说的是，如果内容超过了我的跨度高度“30px”，那么我的js将在跨度内容的末尾添加一个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++;
            }
        });

第1行内容
第2行内容
第3行内容
第4行内容
第5行内容。。

我尝试过这个，我想出了这个解决方案，但这是在字符数的基础上添加readmore链接，但我想在高度的基础上这样做：

var k=1；
$（'.spanContent pre'）。每个（函数（事件）{
var最大高度=285；
log（$（this.height（））；
如果（$（此）.height（）>最大高度）{
var id=$（this.attr（“id”）；
var short_content=$（this.html（）.substr（0200）；
var long_content=$（this.html（）；
$（this）.html（短内容）+
'' +
''+长_内容+''；
k++；
}
});

---

对此问题的解决方案将受到高度赞赏。谢谢

更好的解决方案是在一个标记中设置每一行并隐藏溢出元素。如何在一个标记中设置每一行。？因为内容可以是任何内容（不是固定内容）。如果生成html，可以在一个标记中设置每行文本。因此，我将为每行指定字符数。因此，如果文本将达到字符数，它将添加到一个标记中。其他的也一样，等等。这就是你想说的。？@Mohammad我在等待你的回答。更好的解决方案是你在一个标记中设置每一行并隐藏溢出元素。我如何在一个标记中设置每一行。？因为内容可以是任何内容（不是固定内容）。如果生成html，可以在一个标记中设置每行文本。因此，我将为每行指定字符数。因此，如果文本将达到字符数，它将添加到一个标记中。其他的也一样，等等。这就是你想说的。？@穆罕默德，我在等待你的回应。

<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> 

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++;
            }
        });