javascript - 在 div 元素的 Y 溢出时调用(触发)一个 JS 函数

Question

所以，我有一个 <div>元素，它有自动换行，但是 overflow-y已设置为 hidden (这正是我所需要的)。

但假设 <div>文本太多，以至于溢出，结果 - 其余文本被隐藏(很好)。

但我想实现如下效果:当且仅盒子在y方向溢出时，我想让它显示一些文字，说:“< strong>点击显示其余部分”。我知道如何制作“单击以显示其余部分”部分，但我不知道如何在 only 框溢出时显示文本 < strong>y方向。

快速旁注: 我阅读了 Calling JavaScript from function from CSS .我的想法是在 overflow-y 上它会调用一个函数，但事实证明这是不可能的。所以我正在寻找另一种解决方案。

我的 <div>元素:

<div style="background-color:rgb(220,220,220);height:30%;width:1024px;overflow-y:hidden;word-wrap:break-word;">

那么，问题的概述:当 div 在 y 方向溢出时，我需要显示“单击此处查看其余部分”。

提前致谢

Answer 1

您可以使用以下函数来计算您拥有的行数:

var divHeight = $('div.use-overflow').height();
var x = ('div.use-overflow').css('line-height');
lineHeight = parseInt(x); // Returns clean line-height
var lines = divHeight / lineHeight; // Returns number of lines

然后简单地使用 if 语句根据段落的行数来显示或隐藏阅读更多按钮。像这样:

if(lines > 4){
  $('.readmore').show();
}else{
  $('.readmore').hide();
}