如果兄弟 div 中的行超过 n 行，则隐藏显示更多/更少 div

Posted 2023-04-12

【中文标题】如果兄弟 div 中的行超过 n 行，则隐藏显示更多/更少 div

【英文标题】：Hide Show More/Less div if more than n lines in sibling div

【发布时间】：2019-02-18 09:20:13

【问题描述】：

我正在研究一种显示帖子的方式，如果帖子的文本超过三行，则只显示前三行，其余的通过 Show More/Show Less div 切换。我在帖子上使用液体循环，一个用于截断的 css 类和一个用于切换截断类的 jquery

我现在的问题是，如果我们的行数少于三行，我想为 Show More/Show Less div 提供 display:none 属性，但我不知道怎么做。

这里是代码摘录：

html:

<div class="posts">
% for post in site.posts %
<div class="post-teaser">
  % if post.thumbnail % 
  <div class="post-img">
     <img src=" site.baseurl / post.thumbnail ">
  </div>
  % endif %
  <span>
      <header>
        <h1>
             post.title 
        </h1>
        <p class="meta">
           post.date | date: "%B %-d, %Y" 
        </p>
      </header>
      <div id="post.path" class="excerpt truncate">
           post.content | strip_html | escape 
      </div>
          <div class="txtcol"><a>Show More</a></div>
  </span>
</div>
% endfor %

CSS：

/* styles for '...' */ 
.truncate 
/* hide text if it more than N lines  */
overflow: hidden;
/* for set '...' in absolute position */
position: relative; 
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em; 
/* fix problem when last visible word doesn't adjoin right side  */
text-align: justify;  
/* place for '...' */
margin-right: -1em;
padding-right: 1em;

/* create the ... */
.truncate:before 
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;

/* hide ... if we have text, which is less than or equal to max lines 
*/
.truncate:after 
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;

从这里：http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

还有 jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function()
  $(".txtcol").click(function()
    if($(this).prev().hasClass("truncate")) 
            $(this).children('a').text("Show Less");
         else 
            $(this).children('a').text("Show More");
        
  $(this).prev().toggleClass("truncate");

  );
);
</script>

如果可能，我更喜欢 CSS 解决方案。

编辑：这是一个 sn-p： https://jsfiddle.net/6349q51r/4/

在第二篇文章中，不应出现 show more/show less（在大多数设备上）。

编辑 2： 这是我尝试实现它，但不知何故

$(this).next().css("display", "none;");

不起作用。 https://jsfiddle.net/6349q51r/29/+

编辑 3： 这是一个错字；它现在有效： https://jsfiddle.net/6349q51r/36/

【问题讨论】：

如果您根据自己的情况创建一个 sn-p，这将非常有帮助！

为了进一步 thomas 的评论，如果您可以使用呈现的 html 而不是看起来像液体的东西，那也将非常有益

您可以使用正则表达式来计算 dom 中有多少行，然后切换类以显示或显示切换链接。

这个答案可能会有所帮助：***.com/questions/8720931/…

【参考方案1】：

您可以使用数据的 scrollHeight 检查数据的高度。如果 scrollHeight 大于 height 则显示 Show More/Less div。

我已经为你创建了一个 sn-p.. 看看 js 和 css。

$(document).ready(function()
  $(".content").each(function()
    if($(this).height() < $(this)[0].scrollHeight)
      $(this).parent().find(".txtcol").show();
      $(this).toggleClass("truncate");
    
  );
  $(".txtcol").click(function()
    if($(this).prev().hasClass("truncate")) 
    				$(this).parent().find(".content").css("max-height", $(this).parent().find(".content")[0].scrollHeight);
            $(this).children('a').text("Show Less");
         else 
    				$(this).parent().find(".content").css("max-height", "3.6em");
            $(this).children('a').text("Show More");
        
  $(this).prev().toggleClass("truncate");

  );
);

.content 
    width:100px;
    overflow: hidden;
    white-space:normal;
    text-overflow: ellipsis;
    line-height: 1.2em;
    /* max-height = line-height (1.2) * lines max number (3) */
    max-height: 3.6em; 
    /* fix problem when last visible word doesn't adjoin right side  */
    text-align: justify;  

.txtcol
  display:none;
  color:blue;
  cursor:pointer;

.maincontent
  display:inline-block;
  vertical-align:top;
  border: 1px solid gray;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</div>
<div class="txtcol"><a>Show More</a></div>
</div>

<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been 
</div>
<div class="txtcol"><a>Show More</a></div>
</div>


<div class="maincontent">
<div class="content">
Lorem Ipsum is simply 
</div>
<div class="txtcol"><a>Show More</a></div>
</div>

您可以在 jsfiddle 上用少量文本对其进行测试..

https://jsfiddle.net/nimittshah/rdjyucpz/

谢谢，

【讨论】：

一旦我有多个类似这样的条目，这将不起作用。特别是代码 if($(".content").height()

如果你有多个条目，你需要稍微改变你的 html.. 我已经创建了 jsfiddle.. jsfiddle.net/nimittshah/0rsmhte2/18

当你的文字很短时，它现在不能正确隐藏。

但是，我的最新版本是基于我从您的回答中得到的一个想法，您能检查一下是否有问题吗？我是一个网页设计新手：D.

更新了答案 jsfiddle jsfiddle.net/nimittshah/1wxjv097 和 sn-p。

【参考方案2】：

$(document).ready(function()
  $(".content").each(function()
    if($(this).height() < $(this)[0].scrollHeight)
      $(this).parent().find(".txtcol").show();
      $(this).toggleClass("truncate");
    
  );
  $(".txtcol").click(function()
    if($(this).prev().hasClass("truncate")) 
    				$(this).parent().find(".content").css("max-height", $(this).parent().find(".content")[0].scrollHeight);
            $(this).children('a').text("Show Less");
         else 
    				$(this).parent().find(".content").css("max-height", "3.6em");
            $(this).children('a').text("Show More");
        
  $(this).prev().toggleClass("truncate");

  );
);

.content 
    width:100px;
    overflow: hidden;
    white-space:normal;
    text-overflow: ellipsis;
    line-height: 1.2em;
    /* max-height = line-height (1.2) * lines max number (3) */
    max-height: 3.6em; 
    /* fix problem when last visible word doesn't adjoin right side  */
    text-align: justify;  

.txtcol
  display:none;
  color:blue;
  cursor:pointer;

.maincontent
  display:inline-block;
  vertical-align:top;
  border: 1px solid gray;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</div>
<div class="txtcol"><a>Show More</a></div>
</div>

<div class="maincontent">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been Lorem Ipsum has been 
</div>
<div class="txtcol"><a>Show More</a></div>
</div>


<div class="maincontent">
<div class="content">
Lorem Ipsum is simply 
</div>
<div class="txtcol"><a>Show More</a></div>
</div>