Question

我正在页面上构建一系列图块，其中所有图块的大小相同（370px x 370px）。当文本溢出div时，文本的溢出部分将被隐藏，并显示隐藏的滚动条。现在我希望滚动条保持隐藏状态，但也有一些图像或文本表明特定磁贴上隐藏了更多文本。

将出现“阅读更多”链接，表示将鼠标悬停在div上并阅读更多内容。

下面是某事。我在考虑

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

我确定上面的代码是错误的，所以如果有人能给我一个提示，我将不胜感激。

提前感谢您的帮助。

Answer 1

您需要检查每个div，而不仅仅是全局集。您可以使用过滤器：

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

Answer 2

我们一直这样做，并提出了这个解决方案（纯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>

使用CSS：

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

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

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

文本溢出div时显示文本

2 个答案: