Question

我正在一种显示帖子的方式，如果帖子的文本多于三行，则仅显示前三行，其余的通过“显示更多/显示更少” div进行切换。我在帖子的循环中使用液体，使用css类进行截断，并使用jquery进行截断类

我现在的问题是，如果我们的行数少于三行，我想给Show More / Show Less div显示：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解决方案。

编辑：这是一个代码段： https://jsfiddle.net/6349q51r/4/

在第二篇文章中，“显示更多/更少显示”不应出现（在大多数设备上）。

编辑2：这是我尝试实现的方法，但是以某种方式

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

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

编辑3：这是一个错字；现在可以正常工作： https://jsfiddle.net/6349q51r/36/

Answer 1

$(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>

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

1 个答案: