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通过检查元素是否有溢出并根据元素是否有溢出来切换按钮。

{'hate': [(2310, "Experiencer: 'Anakin'", 2180, 2186), 
          (2310, "Stimulus: 'One'", 2484, 2487)], 
 'confirmation': [(4132, "Experiencer: 'Qui-Gon's'", 4100, 4109), 
                  (4132, "Stimulus: 'Anakin'", 4281, 4287)]
}

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

来自以下位置的溢出检查参考： Check with jquery if div has overflowing elements

Answer 2

为解决此问题，我使用了以下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>

这是CSS：

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

夹线时插入更多阅读按钮

2 个答案: