Javascript 线路夹紧时插入“读取更多”按钮

我想看到一个阅读更多按钮时，文本溢出，而不是显示，如果文本没有溢出

到目前为止，如果line clamp溢出到第18行，则我有以下代码：

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

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

---

但是，我只希望按钮显示是否超过长度：

您可以使用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.

请注意，您需要从适当的部分调用此函数，这些部分可能会更改overflow元素中的内容

溢出检查的参考源：

---

为了解决这个问题，我使用了以下javascript：

var element = document.querySelector('.pcontent');
if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
   // your element have overflow
  document.querySelector('#read-more').style.visibility = "visible";
}
else{
  //your element don't have overflow

<p class="pcontent">Text here</p>
<a id="read-more" href="readmore.html">Read more</a>

.pcontent {
    display: -webkit-box;
    -webkit-line-clamp: 18;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
#read-more {
    visibility: hidden;
}