todos, actualmente estoy experimentando un problema y no sé cómo implementarlo.
Ahora espero que el artículo en la etiqueta p muestre como máximo dos líneas. No importa cuántas palabras haya, debe agregar ..show_more al final del artículo,
pero no se que hacer Cómo lograr este requisito, ¡así que quiero pedir su ayuda!
$(function(){ let len = 70; $('p').each(function(){ if($(this).html().trim().length >len){ var str=$(this).html().substring(0,len-1)+"<button class='info-more'>...顯示更多</button>"; $(this).html(str); } }); }); .item{ 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; margin-bottom: 60px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="item"> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit incidunt sit accusamus nisi veritatis consequatur, pariatur a voluptates esse nostrum omnis rerum veniam, ipsam laborum dignissimos placeat recusandae neque facere sed quis similique. Sint harum hic, laboriosam molestiae, fuga beatae, velit dolorum aperiam repellendus ipsum sapiente vel voluptate eos. Adipisci animi ab provident id cumque, omnis totam accusamus aperiam minus iste consectetur vero corrupti repellat at. Harum architecto incidunt dolores impedit cupiditate aliquam consectetur, itaque voluptas aspernatur facere consequuntur a quisquam qui vero quia quaerat libero. Animi voluptates sunt incidunt, nisi laboriosam commodi accusantium explicabo itaque rem ullam cum at.</p> </li> <li class="item"> <p>Lorem ipsum dolor sit amet consectetur.</p> </li> <li class="item"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam velit soluta praesentium. Tempore praesentium eaque omnis ab vitae deleniti consequuntur vel, suscipit, aut repellendus rerum repudiandae, est neque in beatae? Velit hic quam nulla rem quos nobis id neque nihil consectetur voluptas exercitationem iusto, suscipit molestiae explicabo veniam perferendis possimus doloremque labore laborum eaque repellendus saepe dicta expedita! Aut totam deserunt fuga iste ad deleniti aspernatur id nostrum voluptatum dolores.trum voluptatum dolores.</p> </li> </ul>Espero que te sirva!!!
$(document).ready(function() { var showChar = 100; var ellipsestext = "..."; var moretext = "More"; var lesstext = "Less"; $('.more').each(function() { var content = $(this).html(); if(content.length > showChar) { var c = content.substr(0, showChar); var h = content.substr(showChar-1, content.length - showChar); var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>'; $(this).html(html); } }); $(".morelink").click(function(){ if($(this).hasClass("less")) { $(this).removeClass("less"); $(this).html(moretext); } else { $(this).addClass("less"); $(this).html(lesstext); } $(this).parent().prev().toggle(); $(this).prev().toggle(); return false; }); }); a { color: #0254EB } a:visited { color: #0254EB } a.morelink { text-decoration:none; outline: none; } .morecontent span { display: none; } .comment { width: 400px; background-color: #f0f0f0; margin: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="comment more"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam ligula sodales orci, congue imperdiet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis convallis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec. </div> <div class="comment more"> Duis nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. Curabitur et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor. </div> <div class="comment more"> consectetur adipiscing elit. Proin blandit </div>