Jquery 文本溢出div时显示文本

我在一个页面上构建了一系列的平铺，其中所有的平铺大小都是370px 370px。当文本溢出div时，文本的溢出部分将隐藏，并显示隐藏的滚动条。现在，我希望滚动条保持隐藏，但也有一些图像或文本指示有更多的文本隐藏在一个特定的瓷砖

此时会出现“读取更多”链接，指示将鼠标悬停在div上并读取更多

下面是我一直在想的事情

    $(document).ready(function(){
    if($('p').height() > ('div').height())
    {
        $(this).html('Read more');
    }
    });

我确信我上面的代码是错误的，因此如果有人能给我一个提示，我将不胜感激

---

提前感谢您的帮助。

您需要检查每个div，而不仅仅是一个全局设置。您可以使用过滤器进行以下操作：

 $('div').filter(function(){
      return $(this).height() < $(this).find('p').height();
 }).append('<span>Read more...</span>)

---

我们一直在这样做，并提出了纯javascript的解决方案：

<script type="text/javascript">
  window.setTimeout(showScroll, 1000);
  window.addEventListener("resize", function(){
    showScroll();
  });
  function showScroll(){
    if(document.getElementsByClassName("responsive-table").length==1)
    {
      var e = document.getElementsByClassName("responsive-table")[0];
      if(e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth){
        e.classList.add("responsive-table-scroll");
      }
      else{
        e.classList.remove("responsive-table-scroll");
      }
    }
  }
</script>

---

这将应用于表元素，但您可以将其与任何类选择器一起使用。您甚至可以修改它以显示水平或垂直溢出指示器。

您至少尝试过吗？检查溢出元素的大小是否大于父元素似乎是实现这一点的一种方法？我尝试了一些方法，但我的jquery/javascript技能非常令人失望：我建议从将div的溢出设置为无开始，并在出现按钮上的单击事件时调整div的大小。谢谢建议；没有真正起作用；现在让我们试着换一种方式来处理它。如果一个div有一个滚动条，你会怎么做？@Jack发生了什么事？控制台有错误吗？你检查过DOM吗？它没有给ma任何错误，但也没有做任何事情：@Jack检查DOM，跨度可能在那里，但你看不到它，因为你的div溢出：隐藏。将div位置设置为relative，绝对顶部0左0的范围应该会显示它；“阅读更多”不会出现在任何地方

.responsive-table{
    overflow-x:auto;
}

.responsive-table-scroll:before{
    position:absolute;
    right:0px;
    margin:10px;
    font-style:italic;
  content:"Scroll to see more -->";
}