Sin más preámbulos, ¡comencemos con el código!
1. Mostrar solo una línea de texto y luego ocultarla y omitirla
// Solo muestra una línea de texto y luego omite .element {
ancho: 300px /* Es necesario establecer un ancho fijo */
espacio en blanco: nowrap /* Forzar visualización de una sola línea sin ajuste de línea */
overflow: oculto /* Ocultar la parte más allá del cuadro */
desbordamiento de texto: puntos suspensivos; /* Mostrar puntos suspensivos en exceso */
}2. Muestre el número especificado de líneas de texto y luego ocúltelo y omítalo.
// Omitir después de mostrar text.element de varias líneas {
ancho: 300px /* Es necesario establecer un ancho fijo */
display: -webkit-box /* Usar diseño de cuadro flexible */
-webkit-box-orient: vertical /* disposición vertical */
-webkit-line-clamp: 3 /* Mostrar tres líneas */
overflow: oculto /* Ocultar la parte más allá del cuadro */
desbordamiento de texto: puntos suspensivos; /* Mostrar puntos suspensivos en exceso */
} El texto de varias líneas se omite mediante display: -webkit-box; diseño de cuadro flexible y -webkit-line-clamp para lograr el truncamiento del texto de varias líneas.
Nota: Este método es adecuado para los navegadores principales de WebKit (como Chrome, Safari, etc.). Para otros navegadores, es posible que se requiera compatibilidad adicional con polyfill.
Otras soluciones
1. Utilice JavaScript para calcular dinámicamente la altura del contenido del texto y truncarlo.
2. Utilice bibliotecas existentes: como: Clamp.js
Clamp.js: una biblioteca liviana para el truncamiento de texto de varias líneas en varios navegadores.
// Línea única $clamp(myHeader, {clamp: 1});
//Varias líneas $clamp(myHeader, {clamp: 3});
// Calcula automáticamente el número de filas según la altura disponible $clamp(myParagraph, {clamp: 'auto'});
// Calcula automáticamente el número de líneas según la altura fija $clamp(myParagraph, {clamp: '35px'}); 3. CSS Fallback (solución de compatibilidad parcial)
Para algunos navegadores, aunque no existe soporte directo para -webkit-line-clamp , podemos combinarlo con algo de CSS simple para lograr un efecto aproximado.
.elemento {
mostrar: bloque /* Mostrar como bloque */
overflow: oculto /* Ocultar contenido sobrante */
desbordamiento de texto: puntos suspensivos; /* Mostrar puntos suspensivos en exceso */
altura de línea: 1,5 em /* Establecer altura de línea */
altura máxima: 4,5 em; /* Altura máxima de 3 líneas, 3 líneas * 1,5 líneas de alto = 4,5 em */
espacio en blanco: normal; /* mantener ajuste de texto normal */
}Aunque este esquema no puede lograr un truncamiento preciso de varias líneas en todos los casos, sigue siendo adecuado para admitir la visualización básica de omisiones de texto de varias líneas.
Con esto concluye este artículo sobre cómo ocultar y mostrar puntos suspensivos después de que el texto CSS excede el límite y otras soluciones de compatibilidad del navegador. Para obtener más texto CSS relacionado que excede el contenido oculto, busque artículos anteriores en downcodes.com o continúe explorando los artículos relacionados a continuación. ¡Espero que apoyes más a downcodes.com en el futuro!