Cómo limitar líneas de texto solo con CSS

Limitar la cantidad de texto en un elemento es un requisito común de diseño web. A menudo verá un artículo con un extracto de tres o cuatro líneas con un botón que le permite expandir el texto completo.

Puede crear este diseño usando una combinación de CSS y JavaScript. Pero también puedes hacerlo usando solo CSS. Descubra dos formas de limitar el texto en un cuadro y cómo puede crear un botón de expansión dinámico usando solo CSS.

La técnica del webkit

Cree una carpeta vacía y edite dos archivos dentro de ella: índice.html y estilo.css. Dentro de índice.html archivo, cree un esqueleto HTML:

html>
<htmlidioma="es">
<cabeza>
<título>Documentotítulo>
<enlacereal="hoja de estilo"href="estilo.css">
cabeza>
<cuerpo>
cuerpo>
html>

Un enlace en el sección, a la estilo.css archivo, asegura que cualquier CSS que agregue a ese archivo se aplicará a esta página. A continuación, pegue el siguiente marcado HTML dentro del etiquetas en índice.html:

<secciónclase="grupo de cartas">
<artículoclase="tarjeta">
<h2>Articulo 1h2>
<pagclase="texto de corte">
 Texto de 300 palabras va aquí
pag>
<aportetipo="caja"clase="expandir-btn">
artículo>
<artículoclase="tarjeta">
<h2>Artículo 2h2>
<pagclase="texto de corte">
 Texto de 200 palabras va aquí
pag>
<aportetipo="caja"clase="expandir-btn">
artículo>
<artículoclase="tarjeta">
<h2>Articulo 1h2>
<pagclase="texto de corte">
 El texto de 100 palabras va aquí
pag>
<aportetipo="caja"clase="expandir-btn">
artículo>
sección>

La estructura de este HTML es simple, pero todavía usa marcado semántico para la accesibilidad. Un elemento de sección contiene tres elementos de artículo. Cada artículo consta de un encabezado, un párrafo y un elemento de entrada. Utilizará CSS para diseñar cada sección de artículo en una tarjeta.

Mientras tanto, su página se verá así:

En la imagen de arriba, puede ver diferentes longitudes de texto en cada párrafo. 300 palabras en el primero, 200 palabras en el segundo y 100 en el tercero.

El siguiente paso es comenzar a diseñar la página agregando CSS al estilo.css archivo. Comience restableciendo el borde del documento y dándole al cuerpo un color de fondo blanco:

*, *::antes, *::después {
tamaño de caja: cuadro de borde;
}
cuerpo {
fondo: #f3f3f3;
Desbordamiento: oculto;
}

A continuación, convierta el elemento con la clase de grupo de tarjetas en un contenedor de cuadrícula con tres columnas. Cada sección de artículo ocupa una columna:

.card-group {
mostrar: red;
cuadrícula-plantilla-columnas: repetir(3, 1es);
brecha: .5rem;
alinear elementos: arranque flexible;
}

Diseñe cada sección de artículo como una tarjeta con color de fondo blanco y un borde negro ligeramente redondeado:

.tarjeta {
fondo: blanco;
relleno: 1movimiento rápido del ojo;
borde: 1píxelessólidonegro;
borde-radio: .25em;
}

Finalmente, agregue algunos márgenes:

h2, pag {
margen: 0;
}
h2 {
margen inferior: 1movimiento rápido del ojo;
}

Guarde el archivo y verifique su navegador. La página debe verse como la página que se muestra en la siguiente imagen:

El siguiente paso es reducir el número de líneas de cada texto a 3. Aquí está el CSS para eso:

.cuttoff-text {
--lineas maximas: 3; 
Desbordamiento: oculto;

mostrar: -webkit-caja; 
-webkit-caja-orientar: vertical;
-webkit-línea-abrazadera: variable(--lineas maximas);
}

Comience por configurar una variable CSS, max-lines, a 3 y ocultando contenido desbordado. Luego ajuste la pantalla a -webkit-caja y sujete la línea a 3.

La siguiente imagen muestra el resultado. Cada tarjeta muestra una elipse en la tercera línea de texto:

Esta técnica puede ser bastante difícil de lograr. Si tuviera que omitir alguna propiedad, entonces todo se rompería. Otro inconveniente es que no puede usar una propiedad de visualización que no sea --webkit-caja. Por ejemplo, es posible que desee usa Grid o Flexbox. Por estas razones, la siguiente técnica es mejor.

Un enfoque más flexible para limitar el número de líneas en el texto

Esta técnica le permite hacer lo mismo que el enfoque de webkit, con los mismos resultados. Pero la gran diferencia es que tienes toneladas de flexibilidad porque tú mismo estableces la altura. Además, puede usar cualquier propiedad de visualización o cualquier opción de estilo que prefiera.

Para comenzar, reemplace el bloque CSS por .texto de corte con este:

.cuttoff-text {
--lineas maximas: 5;
--altura de la línea: 1.4;
altura: calcular(variable(--lineas maximas) * 1ellos * variable(--altura de la línea));
altura de la línea: variable(--altura de la línea);
posición: relativo;
}

Establecer una altura de línea es importante porque debe tenerla en cuenta al determinar su altura. Para obtener la altura, multiplica la altura de la línea por el tamaño de la fuente y el número de líneas.

Añadimos posición: relativa propiedad porque la necesitamos para agregar el efecto de desvanecimiento. Agregue el siguiente CSS para completar el efecto:

.cuttoff-text::antes {
contenido: "";
posición: absoluto;
altura: calcular(2ellos * variable(--altura de la línea));
ancho: 100%;
abajo: 0;
puntero-eventos: ninguno;
fondo: gradiente lineal(aabajo, transparente, blanco);
}

El CSS anterior difumina la última línea de texto de cada tarjeta. Puede lograr un efecto de desvanecimiento usando el fondo propiedad y un gradiente. debes configurar puntero-eventos a ninguno para asegurarse de que el elemento no es seleccionable.

Aquí está el resultado:

Esta técnica logró el mismo resultado que la anterior (más el desenfoque al final). Pero obtienes más flexibilidad para usar otros tipos de diseños y diseños.

Adición de un botón dinámico de expansión y contracción

Agregar un botón de expandir/contraer hace que las tarjetas sean más realistas e interactivas. Con este patrón, expande el contenido haciendo clic en el Expandir botón, después de lo cual el texto cambia a Colapsar. Entonces, el texto del botón cambia entre "Expandir" y "Contraer" al hacer clic en él. Además, el resto del contenido se muestra y se oculta en cada estado respectivo.

Ya ha definido un aporte elemento en su HTML. Este elemento servirá como su botón. Para diseñar esta entrada en un botón, incluye el siguiente CSS en tu hoja de estilo:

.expand-btn {
apariencia: ninguno;
borde: 1píxelessólidonegro;
relleno: .5em;
borde-radio: .25em;
cursor: puntero;
margen superior: 1movimiento rápido del ojo;
}

Cuando se desplaza sobre el botón, desea cambiar el color de fondo:

.expand-btn:flotar {
color de fondo: #ccc;
}

Ahora el CSS para cambiar el texto cuando se verifica la entrada:

.expand-btn::antes {
contenido: "Expandir"
}
.expand-btn:comprobado::antes {
contenido: "Colapsar"
}

Ahora, cuando hace clic en el botón/entrada, el texto va de Expandir a Colapsar. Pero el contenido en sí no se expandirá todavía. Para que lo haga cuando haga clic en el botón, agregue el siguiente CSS:

.cuttoff-text:tiene(+.expand-btn:comprobado) {
altura: auto;
}

Este ejemplo usa has() Selector de CSS para orientar el elemento. Con este código, está diciendo que si el área de texto de corte tiene un botón de expansión marcado, la altura de la tarjeta debe ser auto (que lo expande).

Aquí está el resultado:

Otros consejos y trucos de CSS para aprender

Este artículo demostró dos métodos diferentes para limitar el número de líneas en un cuadro usando CSS. Incluso agregamos un botón para expandir/contraer el contenido sin escribir una sola línea de JavaScript.

Pero hay toneladas de otros consejos y trucos en CSS. Estos consejos le ofrecen una forma creativa de lograr los diseños deseados sin afectar el rendimiento, la legibilidad o la accesibilidad.