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

Question

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

但如果描述少于或等于 2 行，我不想显示“阅读更多”按钮。只有当描述超过 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();
}