javascript - 夹线时插入阅读更多按钮

Question

我希望在文本溢出时出现一个阅读更多按钮，如果文本没有溢出则不显示

到目前为止，如果它溢出到第 18 行，我有以下代码来进行线夹:

display: -webkit-box;
-webkit-line-clamp: 18;
-webkit-box-orient: vertical;  
overflow: hidden;

我进行了彻底的搜索，只能找到切换显示更多的解决方案，当 div 超过一定长度时显示更少。

但是，我只希望按钮在超过长度时显示:<a href="article.html">Read more</a>

Answer 1

您可以使用 javascript 通过检查元素是否溢出并根据元素是否溢出来切换按钮来实现此目的。

function showReadMoreButton(element){
   if (element.offsetHeight < element.scrollHeight ||
        element.offsetWidth < element.scrollWidth) {
        // your element has an overflow
        // show read more button
    } else {
        // your element doesn't have overflow
    }
}

Example call:
var elementToCheck = document.getElementById('someElementToCheck');
showReadMoreButton(elementToCheck);


// call showReadMoreButton() after page load and/or window resize and/or functions which change content within the overflow element.

请注意，您需要从可能更改溢出元素内内容的适当部分调用此函数。

溢出检查的引用资料来自: Check with jquery if div has overflowing elements