Si usa javascript para establecer cuándo el párrafo del artículo supera las dos líneas, aparecerá el botón mostrar más.
Si no hay más de dos líneas, no se mostrará showMore. Actualmente utilizo el método de conteo de palabras para plantear un problema, es decir, tiene más de dos líneas. Está bien, pero el número de palabras no ha llegado a 40, por lo que el botón mostrar más no aparecerá. Quiero usar el número de líneas para juzgar, pero ¿cómo debo escribirlo?
$(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>Cree un elemento ficticio con a<br>a para simular un elemento con 2 líneas.
Obtenga su altura y compárela con otro elemento.
Si el elemento dado es más grande que el elemento ficticio, agregue el button después de él (no funcionará porque se colocará al final de la cadena que está oculta)
He agregado el método inserAfter de esta respuesta para hacer que la adición de botones sea más limpia.
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>Se me ocurrió esta solución, pero en lugar de tener un botón, es más fácil hacerlo realidad con esos elementos.
aquí está la solución que se me ocurrió. (haga clic en el texto para mostrar más, haga clic de nuevo para ocultar)
$(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>