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

Posted 2023-03-31

【中文标题】根据 div 中的行数显示“阅读更多”按钮

【英文标题】：Display "Read More" Button based on number of lines in a div

【发布时间】：2019-01-28 02:48:15

【问题描述】：

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

但如果描述少于或等于 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();

【问题讨论】：

请添加您的html等。您不应该依赖像素大小等。

如果您确实想使用像素大小，请使用 .height() 方法，因为它会给出一个没有单位的数字作为返回值，然后您可以使用大于或等于运算符开。

How can I count text lines inside an DOM element? Can I?的可能重复

问题更复杂，因为 line-height 在未设置为像素值时返回“正常”

How to create a "show more" button and specify how many lines of text can be initially shown的可能重复

【参考方案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();

【讨论】：

这成功了。非常感谢您花时间解释。