0
271
ViewsHow to use javascript to display the button when the article exceeds two lines
There is a problem that has been bothering me, and I received a request! The more button needs to appear when the article has more than two lines. If the user's article has exactly two lines or no more than two lines, there is no need to add the more button!
I have searched for a lot of methods, but I have not found a suitable method to achieve this requirement. I have made an explanatory diagram and hope to get your help!
thanks.
$(function(){
let len = 70;
$('.demo').each(function(){
if($(this).html().trim().length >len){
var str=$(this).html().substring(0,len-1)+"<button class='info-more'>...more</button>";
$(this).html(str);
}
});
}); .content{
width: 200px;
font-size: 15px;
line-height: 1.5;
overflow:hidden;
text-overflow:clip;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
我是 james 我是文章 我是 james 我是文章 我是 james 我是文章 我 是 james 我是文章 我是 james 我是文章
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
You can do this with CSS Limit text length to n lines using CSS
BUT you asked for a JS version
https://jsfiddle.net/mplungjan/zhnp3c17/
$(function(){
let len = 10;
let $but = $('<button class="info-more" >...more</button>')
$('.content').each(function(){
const $textDiv = $(".text",this); // container
let str = $textDiv.text().trim(); // string
let diff = str.length - len; // difference in length
console.log(diff)
if (diff > 0) {
$textDiv.text(str.slice(0,len)) // slice if needed
$(this)
.append($('<span class="moreSpan" hidden/>').text(str.slice(len)))
.append($but.clone());
$(".info-more",this).toggle(diff>0); // show more if needed
}
});
$(".info-more").on("click",function() {
const $moreSpan = $(this).closest("div").find(".moreSpan")
$moreSpan.toggle()
$(this).text($moreSpan.is(":visible")? "...less": "...more")
})
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content"><span class="text">
我是 james 我是文章 我是 james 我是文章 我是 james 我是文章 我 是 james 我是文章 我是 james 我是文章</span>
</div>
·
Juan Pablo Isaza
Report
Answer question