用 JS 在特定行数后显示 "read more" 按钮

Question

我想让我的段落最多 3 行。如果超出此范围，我会显示一个“阅读更多”按钮。

应该隐藏第一个 post 的“阅读更多”按钮。

我知道如何使用 CSS 来限制段落，但我在使用 showing/hiding“阅读更多”按钮时遇到了问题。

// CSS code to limit paragraphs to 3 lines: 

.post-p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  -webkit-box-orient: vertical;
  line-height: 16px; /* fallback */
  max-height: 48px; /* fallback */
}

我正在尝试使用 jQuery 的 .height() 函数来访问段落的高度，但它总是打印“16”，我认为这是我在 CSS 上面的代码。还有其他方法可以检查段落的高度或行数吗？

补充说明：我正在使用 EJS 从我的 app.js 文件中发送一个 post 对象数组。

<% posts.forEach(function(post) { %>
  <div>
    <p class="post-p"><%= post.content %></p>
    <a class="read-more-btn" href="/posts/<%=post._id%>">Read More...</a>
    <script type="text/javascript">
      console.log($('.post-p').height());
    </script>
  </div>
<% }); %>

// Extra note: I removed the h1 tag from the image I linked to simplify the code.

Answer 1

请注意 line-clamp 还没有很好的跨浏览器支持（参见 https://caniuse.com/?search=line-clamp）。您最好自己创建省略号。

您可以使用以下方法获取元素的高度（以像素为单位）：

var clientHeight = document.getElementById('my-element').clientHeight;

Answer 2

编辑：多亏了@Alexander van Oostenrijk，它才能正常工作。下面是我的解决方案。

<% posts.forEach(function(post) { %>
  <div class="post-div">
    <h1><a href="/posts/<%=post._id%>"><%= post.title %></a></h1>
    <p class="post-p"><%= post.content %></p>
    <a class="read-more-btn" href="/posts/<%=post._id%>">Read More...</a>
  </div>
<% }); %>

<script type="text/javascript">
  $('.post-div').each(function(i, obj) {
    if (obj.children[1].clientHeight < 48) { // post-p
      $(obj.children[2]).hide(); // read-more-btn
    }
  });
</script>

用 JS 在特定行数后显示 "read more" 按钮

Show "read more" button after specific number of lines with JS

html

javascript

css

jquery

ejs