如果使用javascript設定文章段落超過兩行時，會出現showMore按鈕。
如果行數不超過兩行，則不會顯示 showMore。目前我用字數統計的方法設定了一個問題，就是多于兩行。可以，但是字數還沒有達到40，所以不會出現showMore按鈕。想用行數來判斷，但是應該怎么寫呢？
$(function(){
let len = 40;
$('.info_content').each(function(){
if($(this).html().trim().length >len){
var str=$(this).html().substring(0,len-1) "<button class='info-more'>...showMore</button>";
$(this).html(str);
}
});
}); .info_content{
width: 250px;
font-size: 15px;
letter-spacing:1px;
line-height: 1.5;
margin-bottom: 8px;
letter-spacing:0;
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>
<h3 class="info_content">
asd asdasdasd asd asda sdasd asdasd asd asdsda sdasdasda sdasd asda sdasd asd a
</h3>
<h3 class="info_content">
asdasdasddsasfsdfsdfsdfsdf
</h3>
<!-- 第三組 -->
<h3 class="info_content">
asdasdasdasgasdasdas asdasda
asdasdasdasdasdasdasdasdasdd asdasdasdasdasdasdasdasda
asdasdasdasdasdasdas asdasdaasd asda
</h3>uj5u.com熱心網友回復：
我想出了這個解決方案，但與使用按鈕相比，使用這些元素更容易實作。
這是我想出的解決方案。（點擊文字顯示更多，再次點擊隱藏）
$(this).on("click",function(e){
const c =e.target.className.includes("c2");
if(c){
$(e.target).removeClass("c2");
}else{
$(e.target).addClass("c2");}
}); .info_content{
width: 250px;
font-size: 15px;
letter-spacing:1px;
line-height: 1.5;
margin-bottom: 8px;
letter-spacing:0;
overflow:hidden;
text-overflow:clip;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.c2{
-webkit-line-clamp: unset;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="info_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ornare metus. Integer gravida sollicitudin metus, eu aliquet mi varius at. Suspendisse elementum ex erat, at iaculis augue aliquet in. Ut nunc eros, egestas aliquet blandit a, viverra sed tellus.
</h3>
<h3 class="info_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<h3 class="info_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam nunc ac viverra ullamcorper. Nam pellentesque aliquam enim, sit amet molestie enim iaculis non. Vestibulum sit amet diam.
</h3>uj5u.com熱心網友回復：
創建虛擬元素a<br>a以模擬具有 2 行的元素。
獲取其高度并與其他元素進行比較。
如果給定元素大于虛擬元素button，則在其后添加（in 將不起作用，因為它將被放置在隱藏的字串末尾）
我inserAfter從這個答案中添加了方法，使添加按鈕更干凈。
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
const maxHeight = getElementMaxHeight('info_content');
document.querySelectorAll('.info_content').forEach(infoContent => {
infoContent.style.display = 'block';
if (infoContent.clientHeight > maxHeight) {
const button = document.createElement('button');
button.classList.add('info-more');
button.innerText = '...showMore';
infoContent.insertAfter(button);
}
infoContent.style.display = '-webkit-box';
});
}
};
const getElementMaxHeight = (className) => {
const element = document.createElement('div');
element.classList.add(className);
element.innerHTML = 'a<br>a';
element.style.display = 'block';
element.style.position = 'absolute';
document.body.append(element);
const height = element.clientHeight;
element.remove();
return height;
}
Element.prototype.insertAfter = function (newElement) {
this.parentNode.insertBefore(newElement, this.nextSibling);
}.info_content {
width: 250px;
font-size: 15px;
line-height: 1.5;
margin-bottom: 8px;
letter-spacing: 0;
overflow: hidden;
text-overflow: clip;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}<h3 class="info_content">
asd asdasdasd asd asda sdasd asdasd asd asdsda sdasdasda sdasd asda sdasd asd a
</h3>
<h3 class="info_content">
asdasdasddsasfsdfsdfsdfsdf
</h3>
<!-- 第三組 -->
<h3 class="info_content">
asdasdasdasgasdasdas asdasda
asdasdasdasdasdasdasdasdasdd asdasdasdasdasdasdasdasda
asdasdasdasdasdasdas asdasdaasd asda
</h3>
<!-- 第四組 -->
<h3 class="info_content">
qqq
</h3>
<!-- 第五組 -->
<h3 class="info_content">
asdasdasdasgasdasdas asdasda s asdasda s asdasda
</h3>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371618.html
標籤：javascript 查询 css