Desbordamiento de texto de varias líneas en varios navegadores con puntos suspensivos añadidos dentro de un ancho y alto fijos
Hice una imagen para esta pregunta para que sea más fácil de entender.
¿Es posible crear puntos suspensivos <div>con un ancho fijo y varias líneas?
Probé algunos complementos de jQuery aquí y allá, pero no puedo encontrar el que estoy buscando. ¿Alguna recomendacion? ¿Ideas?
Sólo una idea básica rápida.
Estaba probando con el siguiente marcado:
<div id="fos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>
</div>
Y CSS:
#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }
La aplicación de este jQuery logrará el resultado deseado:
var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
$p.text(function (index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
Intenta eliminar repetidamente la última palabra del texto hasta alcanzar el tamaño deseado. Por el desbordamiento: escondido; el proceso permanece invisible e incluso con JS desactivado el resultado sigue siendo "visualmente correcto" (sin el "...", por supuesto).
Si combina esto con un truncamiento sensato en el lado del servidor (que deja solo una pequeña sobrecarga), se ejecutará más rápido :).
Nuevamente, esta no es una solución completa, sólo una idea.
ACTUALIZACIÓN: Se agregó una demostración de jsFiddle .
Bibliotecas Javascript para "sujeción de líneas"
Tenga en cuenta que la "sujeción de línea" también se conoce como "puntos suspensivos en bloque de líneas múltiples" o "puntos suspensivos verticales".
github.com/BeSite/jQuery.dotdotdot
- Ventajas: 2,5 Kb (minimizado y comprimido), no hay mucha actividad en el repositorio, pero tampoco está mal
- Desventajas: dependencia de jQuery, pago para uso comercial (licencia CC-BY-NC-4.0)
- mis 2 centavos: stackoverflow.com/questions/25187774/read-more-and-read-less-with-dotdotdot-jquery/29118739#29118739
- útil stackoverflow.com/questions/19015945/jquery-dotdotdot-expand-truncate-text-onclick
- útil gist.github.com/chiragparekh/c7e33dc749ed25544bde
github.com/josephschmitt/Clamp.js
- Desventajas: repositorio de código apenas activo
- Ventajas: informativo reutilizablebits.com/post/2980974411/clamp-js-v0-2-explanations-and-performance
Aquí hay algunos más que no investigué todavía:
- github.com/ftlabs/ftellipsis
- github.com/micjamking/Succinct
- github.com/pvdspek/jquery.autoellipsis y pvdspek.github.io/jquery.autoellipsis
- github.com/rviscomi/trunk8
- github.com/dobiatowski/jQuery.FastEllipsis
- github.com/theproductguy/ThreeDots
- github.com/tbasse/jquery-truncate
- github.com/kbwood/more
Soluciones CSS para sujeción de líneas
Existen algunas soluciones CSS, pero los usos más simples -webkit-line-clamptienen poca compatibilidad con el navegador . Vea una demostración en vivo en jsfiddle.net/AdrienBe/jthu55v7/
Mucha gente hizo grandes esfuerzos para que esto sucediera utilizando CSS únicamente. Ver artículos y preguntas al respecto:
- css-tricks.com/line-clampin : artículo de 5 estrellas sobre sujeción de líneas
- mobify.com/blog/multiline-ellipsis-in-pure-css : solo CSS
- cssmojo.com/line-clamp_for_non_webkit-based_browsers/ : "imitar" -webkit-line-clamp en navegadores que no son webkit
- Con CSS, use "..." para bloques de líneas múltiples desbordados
- Desbordamiento de texto de varias líneas en varios navegadores con puntos suspensivos añadidos dentro de un ancho y alto fijos
- ¿Cómo mostrar solo las primeras líneas de un div (sujeción)?
- jquery limita las líneas en un párrafo y aplica tres puntos al final
- Limite la longitud del texto a n líneas usando CSS
Lo que recomendaría
Mantenlo simple. A menos que tenga mucho tiempo para dedicarle a esta función, opte por la solución más simple y probada: CSS simple o una biblioteca de JavaScript bien probada.
Elija algo sofisticado/complejo/altamente personalizado y pagará el precio por esto en el futuro.
que hacen los demás
Tener un desvanecimiento como lo hace Airbnb podría ser una buena solución. Probablemente sea CSS básico junto con jQuery básico. En realidad, parece muy similar a esta solución en CSSTricks.
Ah, y si buscas inspiraciones de diseño:
- smashingmagazine.com/2009/07/designing-read-more-and-continue-reading-links/ , aunque desde 2009...
- Dribbble probablemente tenga diseños interesantes... Sin embargo, no pude encontrar una manera de recopilarlos (mediante búsqueda o etiquetas), no dudes en compartir un enlace relevante.
