【发布时间】：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 中有多少行，然后切换类以显示或显示切换链接。
-
这个答案可能会有所帮助：stackoverflow.com/questions/8720931/…
标签： javascript jquery html css