Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

295
Vistas
¿Cómo contar el número de líneas en un artículo usando jQuery?

Disculpe, actualmente tengo un requisito, como el código que proporcioné ~

Necesito usar jquery para determinar cuántas líneas contiene el artículo original. Aunque actualmente se muestra en la pantalla con 2 líneas, es porque usé CSS para realizar la configuración, pero necesito saber cuántas líneas hay en el artículo original ~

Como soy principiante en la programación, no sé cómo hacerlo, espero poder obtener su ayuda, gracias

 .info{ 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; }
 <div class="info">我是文章我是文章我是文章我是文章我是<br>文章我是文章我是文章我是文章我是文章我是文章我是文章我是文章我是<br>文章我是文章我是文章我是文章文章我是文章我是文章我是文章文章我是文章我是文章我是文章</div>

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Puede obtener la altura de un solo carácter dentro del contenedor y luego dividir la altura total del contenedor para obtener el número de líneas. Hice un ejemplo simple a continuación, no estoy familiarizado con la tipografía china, por lo que no puedo decir con seguridad si es una solución de prueba completa.

 $('#count').click(function() { var info = $('.info'); var divTemp = $('#temp'); divTemp.html(info.html()); var divChar = document.createElement('div'); divChar.innerText = '文'; info.prepend(divChar); var lineCount = Math.round(divTemp.height() / divChar.clientHeight); $('#result').text(lineCount); $(divTemp).html(''); $(divChar).remove(); })
 .info { 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; } #temp { font-size: 15px; letter-spacing: 1px; line-height: 1.5; margin-bottom: 8px; letter-spacing: 0; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; /* same as .info except the line clamp */ }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="info">我是文章我是文章我是文章我是文章我是<br>文章我是文章我是文章我是文章我是文章我是文章我是文章我是文章我是<br>文章我是文章我是文章我是文章文章我是文章我是文章我是文章文章我是文章我是文章我是文章</div> <div id="temp"></div> <!-- .info and #temp should be under the same parent --> <span id="result"></span> <button id="count">Count</button>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda