`text-box (text-box-trim și text-box-edge)` în CSS

Culori, fundaluri și text Chrome 133, Firefox 154, Safari 18.2

Taie spațiul gol de deasupra majusculelor și de sub linia de bază, ca textul să fie centrat optic în butoane și carduri.

Sintaxă CSS

text-box: trim-both cap alphabetic;
text-box-trim: trim-both;          /* none | trim-start | trim-end | trim-both */
text-box-edge: cap alphabetic;

Ce face `text-box (text-box-trim și text-box-edge)`

Fiecare rând de text are deasupra și dedesubt un spațiu rezervat de font pentru accente și litere cu „codiță” (g, p, j). Din cauza lui, un buton cu padding egal sus și jos pare adesea că are textul coborât, iar distanța dintre un titlu și marginea cardului arată mai mare decât ai setat.

text-box-trim spune ce margini tai (prima, ultima sau ambele), iar text-box-edge spune până unde: de exemplu cap (vârful majusculelor) sus și alphabetic (linia de bază) jos. Prescurtarea text-box le combină.

Este o proprietate nouă: Chrome 133, Safari 18.2 și Firefox 154. În browserele mai vechi regula este ignorată și textul arată ca înainte, deci o poți adăuga fără riscuri.

Valori uzuale

Valoare	Descriere
`text-box-trim: none`	Nu taie nimic (implicit).
`trim-start / trim-end / trim-both`	Taie deasupra primului rând / sub ultimul rând / ambele.
`text-box-edge: cap alphabetic`	Tăietura sus la vârful majusculelor, jos la linia de bază.
`text-box-edge: ex alphabetic`	Tăietura sus la înălțimea literelor mici (x).
`text-box: normal`	Resetează ambele proprietăți.

Exemple

Exemplul 1: Text centrat optic într-un buton

Cu text-box, padding-ul de 12px se măsoară de la vârful majusculelor până la linia de bază.

.buton {
  padding: 12px 20px;
  line-height: 1.5;
  text-box: trim-both cap alphabetic;
}

Efect vizual în browser

La butonul „Comandă acum” spațiul de deasupra lui „C” este egal cu cel de sub linia de bază; textul nu mai pare coborât spre partea de jos.

Exemplul 2: Titlu aliniat exact cu marginea de sus a imaginii

Doar marginea de sus a titlului este tăiată.

.card-orizontal {
  display: flex;
  gap: 16px;
  align-items: start;
}
.card-orizontal h3 {
  margin: 0;
  text-box: trim-start cap alphabetic;
}