Question

我有一个带有视频说明的视频页面。现在，我想默认以两行显示说明，说明下方将是“阅读更多”按钮。

但是，如果说明少于或等于2行，则我不想显示“阅读更多”按钮。仅当说明超过两行时才会显示“阅读更多”按钮。

我需要使用JS或jQuery完全完成此操作。

这是我迄今为止没有尝试过的尝试。

<div class="video-description" style="line-height:1.2em;max-height:4.8em;">              
<p>
 Description Line 1
 Description Line 2
 Description Line 3
</p>        
</div>
<div class="read-more-button">Read More</div>

if ($('.video-description').css('height') <= '67px' {
   $('.read-more-button').hide();
} else {
   $('.read-more-button').show();
}

Answer 1

通常没有简单的方法来检测div中有多少行文本...唯一可靠的方法是使用1行和2行创建不可见的（使用visibility:hidden）div，这种方法来获取给定类的div中的线的高度。 em的问题在于，也没有其他方法可以获取em中元素的高度。

当您是新手时，我将简单地解决您的问题以及您的示例为何不起作用...首先，如果没有height样式，则获取元素高度的方法是错误的。设置，它将不返回任何内容，如果设置了样式，则将返回以单位为字符串的值，然后您就不能将其与数字进行比较。第二件事是，您在if条件中缺少结尾括号（)），因此您基本上遇到了语法错误。

您应改用height()和一个以像素为单位的数字进行比较，例如：

if($('.video-description').height() <= 67){
   $('.read-more-button').hide();
} else {
   $('.read-more-button').show();
}

根据div中的行数显示“更多”按钮

1 个答案: