Recupera espacio de arriba y abajo del contenido de texto para lograr un equilibrio óptico.
Fecha de publicación: 14 de ene de 2025
A partir de Chrome 133, text-box permite que los desarrolladores y diseñadores adapten el espacio sobre y debajo del texto.
Longhand:
text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;
Símbolo abreviado:
text-box: trim-both cap alphabetic;
Esta propiedad te permite controlar el espacio sobre y debajo del texto, por ejemplo, , y . Cada fuente produce una cantidad diferente de este espacio direccional de bloque que contribuye al tamaño del elemento. Esta contribución caótica del espacio no se mide fácilmente y hasta ahora era imposible controlarla.
La fuente lo sabe, ahora CSS también.
El espacio que se encuentra arriba y debajo de una fuente se debe a la forma en que la Web organiza el texto, lo que se denomina "media interlínea". Esto se explica de forma experta en una publicación de Matthias Ott llamada The Thing With Leading In CSS. En esencia, cuando el texto se escribía a mano, se usaban trozos de plomo metálico para separar las líneas de texto. La Web, inspirada en el texto al principio, divide esa parte de texto al principio en dos y distribuye una parte sobre el contenido y otra debajo.
Este historial es significativo porque text-box nos brinda nombres para cada mitad: superior e inferior. Además, puedes recortarlo.
También hay antecedentes de text-box. Tal vez recuerdes la emocionante publicación de Ethan Wang llamada Leading-Trim: The Future Of Digital Typesetting, en la que se presentó por primera vez leading-trim (el nombre que tenía text-box anteriormente).
Tu punto de entrada para el recorte de texto puede ser Figma y sus controles de “recorte vertical” para diseñadores. En esta publicación de X, se muestra dónde se encuentra esta opción de recorte vertical y cómo es útil para los botones.
Independientemente de cómo hayas llegado aquí, este pequeño control de tipografía puede marcar una gran diferencia.
Descripción general de las funciones y la sintaxis
En mi opinión, estas son las dos frases más comunes que necesitarás cuando trabajes con text-box:
h1 {
/* trim both sides to the capital letters */
text-box: trim-both cap alphabetic;
/* trim both sides to the lowercase letter x */
text-box: trim-both ex alphabetic;
}
Recortar ambos a cap alphabetic será el uso más común de esta función. En las siguientes demostraciones, se usa esto muchas veces. Sin embargo, el ejemplo anterior también muestra ex alphabetic porque es útil para el equilibrio óptico de sus propias maneras únicas.
Zona de pruebas de explorador
La siguiente demostración te permite explorar la sintaxis y ver los resultados con menús desplegables. Puedes cambiar las fuentes, los valores de recorte superior e inferior, y seguir las imágenes y etiquetas con códigos de colores.
Soluciones que puedes probar:
- Inspeccionar visualmente cómo funciona
text-box-trimen variantes de texto de una sola línea y de varias líneas - Coloca el cursor sobre una variante para ver los valores de recorte que se usaron para lograr ese efecto.
- Cambiar la fuente
- Recortar solo un lado de un cuadro de texto
- Revisa la sintaxis mientras juegas.
¿Qué puedo crear con él o qué problemas resuelve?
Esta función de recorte permite obtener soluciones de alineación y centrado mucho más simples. Incluso puedes acercarte más al espacio en blanco adecuado, en el que se puede usar algo como gap entre el contenido.
Centrado más fácil
Para componentes más pequeños, más intercalados y con contenido intrínseco, padding: 10px es un estilo razonable para especificar un elemento con el fin de obtener un espaciado igual en todos los lados. Sin embargo, el resultado puede confundir a las personas, ya que a menudo tiene espacio adicional en la parte superior e inferior.
Para solucionar este problema, los desarrolladores suelen colocar menos padding de forma explícita en la parte superior e inferior (bloque) para compensar los efectos de la mitad de la sangría.
button {
padding-block: 5px;
padding-inline: 10px;
}
En este punto, solo queda probar combinaciones de valores hasta que todo esté centrado ópticamente. Esto puede verse bien en una pantalla y un sistema operativo, pero no en otro.
text-box nos permite recortar la mitad del espacio inicial del texto, lo que hace que los valores de padding iguales como 10px sean útiles:
button {
text-box: trim-both cap alphabetic;
padding: 10px;
}
Estos son algunos elementos que muestran cómo recortar el espacio con text-box hace que padding: 10px se vea igual en todos los lados en un elemento interactivo práctico. Observa cómo la fuente alternativa puede producir un espacio de medio interlineado muy diferente.
Estos son elementos , que suelen usarse para mostrar categorías o insignias. Otro momento en el que el padding de lados iguales debería ser la mejor solución, pero hasta text-box tuvimos que solucionarlo.
Alineación más fácil
El espacio medio adicional y no controlable por encima (over) y por debajo (under) de un cuadro de texto también dificulta la alineación. En los siguientes ejemplos, se muestra cuándo el medio interlineado puede dificultar la alineación y cómo recortar los lados del bloque de un cuadro de texto puede crear mejores alineaciones.
Aquí, se coloca una imagen junto al texto. La imagen crecerá hasta la altura que necesite el texto, pero sin text-box, la imagen siempre será un poco más alta. Con text-box, la imagen se puede alinear perfectamente con el contenido de texto.
Observa que el espacio en blanco está sobre la primera línea de texto con formato y debajo de la última línea de texto con formato en situaciones con unión de líneas.
En el siguiente ejemplo, observa cómo la función se adapta lógicamente a un cambio en writing-mode. Intenta cambiar el texto y observa cómo el diseño sigue alineado.
Continuar el estudio
¿Quieres obtener más información? La siguiente lista de vínculos ofrece información adicional y casos de uso variados.
- https://codepen.io/collection/zxQBaL: Una colección de Codepen de todas las demostraciones anteriores
- https://github.com/jantimon/text-box-trim-examples: Excelente investigación y demostraciones de Jan Nicklas
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- https://drafts.csswg.org/css-inline-3/#text-edges
- No debe confundirse con
size-adjustoascent-overridehttps://web.dev/articles/css-size-adjust - https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- aplicado a muchos elementos HTML https://codepen.io/nileshprajapati/pen/RweKdmw
- Entrada de blog de Safari https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
- https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/