CSS text-box-trim

Adam Argyle

Opublikowano: 14 sty 2025 r.

Od Chrome 133 właściwość text-box umożliwia deweloperom i projektantom dostosowywanie miejsca nad i pod tekstem.

Długopisem:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

Krótko:

text-box: trim-both cap alphabetic;

Ta właściwość umożliwia kontrolowanie miejsca nad i pod tekstem, np. <h1>, <button> i <p>. Każda czcionka tworzy inną ilość tego miejsca kierunkowego bloku, co wpływa na rozmiar elementu. Ten chaotyczny wkład w przestrzeń jest trudny do zmierzenia i do tej pory nie można było go kontrolować.

Czcionka wie, a teraz wie też CSS.

Miejsce nad i pod czcionką istnieje ze względu na sposób, w jaki strona internetowa układa tekst, czyli „półinterlinię”. Ten temat został szczegółowo omówiony w poście Matthiasa Otta zatytułowanym The Thing With Leading In CSS. Zasadniczo, gdy składanie tekstu odbywało się ręcznie, do oddzielania wierszy tekstu używano metalowych elementów. Sieć, zainspirowana interlinią, dzieli ją na 2 części i umieszcza jedną nad, a drugą pod treścią.

Ta historia jest ważna, ponieważ text-box nadaje nazwy każdej połowie: over i under. Dodatkowo umożliwia ich przycięcie.

Wcześniejsze wykorzystanie pomysłu text-box również istnieje. Możesz pamiętać ciekawy post Ethana Wanga zatytułowany Leading-Trim: The Future Of Digital Typesetting, w którym po raz pierwszy wprowadzono leading-trim (wcześniejsza nazwa text-box).

Punktem wyjścia do przycinania tekstu może być z Figmy i jej elementów sterujących "przycinaniem pionowym" dla projektantów. Ten post na X pokazuje, gdzie znajduje się opcja przycinania pionowego i jak jest przydatna w przypadku przycisków.

Niezależnie od tego, jak tu trafiłeś(-aś), to niewielkie ustawienie typografii może mieć duże znaczenie.

Funkcja i składnia

Oto 2 najczęstsze jednowierszowe polecenia, których będziesz potrzebować podczas pracy z 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;
}

Najczęstszym zastosowaniem tej funkcji będzie przycinanie obu do cap alphabetic. W kolejnych prezentacjach jest to używane wielokrotnie. Jednak w poprzednim przykładzie pokazano też ex alphabetic, ponieważ jest to przydatne do optycznego wyważenia na swój własny sposób.

Plac zabaw dla eksploratorów

Poznaj składnię na naszym placu zabaw, i zobacz wyniki za pomocą menu. Możesz zmieniać czcionki, wartości przycinania over i under oraz śledzić wizualizacje i etykiety oznaczone kolorami.

Co warto wypróbować:

1. Wizualne sprawdzenie, jak text-box-trim działa w przypadku wariantów tekstu jedno- i wielowierszowego.
2. Najechanie kursorem na wariant i sprawdzenie wartości przycinania użytych do uzyskania tego efektu.
3. Zmiana czcionki.
4. Przycinanie tylko jednej strony pola tekstowego.
5. Sprawdzenie składni podczas zabawy.

Co mogę zbudować i jakie problemy rozwiązuje ta funkcja?

Dzięki tej funkcji przycinania można uzyskać znacznie prostsze rozwiązania dotyczące wyśrodkowywania i wyrównywania. Możesz nawet zbliżyć się do prawidłowej interlinii, w której między treściami można użyć np. gap.

Łatwiejsze wyśrodkowywanie

W przypadku mniejszych, bardziej wbudowanych i wewnętrznych komponentów treści rozsądnym stylem jest określenie padding: 10px dla elementu, aby uzyskać równe odstępy ze wszystkich stron. Jednak wynik może być mylący, ponieważ często występuje dodatkowe miejsce u góry i u dołu.

Aby obejść ten problem, deweloperzy często jawnie zmniejszają dopełnienie u góry i u dołu (blok), aby zrównoważyć efekty półinterlinii.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

W tym momencie musimy wypróbować kombinacje wartości, aż elementy zostaną optycznie wyśrodkowane. Może to wyglądać dobrze na jednym ekranie i systemie operacyjnym, ale nie na innym.

text-box umożliwia przycięcie półinterlinii z tekstu, dzięki czemu równe wartości dopełnienia, takie jak 10px, są przydatne:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

Oto kilka <button> elementów, które pokazują, jak przycinanie miejsca za pomocą text-box sprawia, że padding: 10px wygląda równo ze wszystkich stron w praktycznym elemencie interaktywnym. Zwróć uwagę, jak alternatywna czcionka może tworzyć zupełnie inne miejsce półinterlinii.

Oto elementy <span>, które są często używane do wyświetlania kategorii lub plakietek. Kolejny moment, w którym najlepszym rozwiązaniem powinno być dopełnienie z równymi bokami, ale do czasu wprowadzenia text-box musieliśmy sobie radzić inaczej.

Łatwiejsze wyrównywanie

Dodatkowe, niekontrolowane miejsce półinterlinii nad (over) i pod (under) polem tekstowym utrudnia też wyrównywanie. Poniższe przykłady pokazują, kiedy półinterlinia może utrudniać wyrównywanie, oraz jak przycinanie boków bloku pola tekstowego może poprawić wyrównanie.

Obraz jest umieszczony obok tekstu. Obraz rośnie do wysokości, której potrzebuje tekst. Bez text-box obraz jest zawsze nieco wyższy. Dzięki text-box obraz może być idealnie wyrównany z treścią tekstową.

Zwróć uwagę, że w przypadku zawijania wierszy białe znaki znajdują się nad pierwszym sformatowanym wierszem tekstu i pod ostatnim sformatowanym wierszem tekstu.

W poniższym przykładzie zobacz, jak funkcja logicznie dostosowuje się do zmiany writing-mode. Spróbuj zmienić tekst i zobacz, jak układ pozostaje wyrównany.

Kontynuuj naukę

Chcesz wiedzieć więcej? Na liście linków poniżej znajdziesz różne ilości dodatkowych informacji i przypadków użycia.

• Zbiór wszystkich prezentacji w CodePen.
• Świetne badania i prezentacje Jana Nicklasa.
• Dwie właściwości CSS do przycinania białych znaków w polu tekstowym w CSS Tricks.
• Układ CSS Inline na krawędziach tekstu.
• Nie należy mylić z size-adjust ani ascent-override
• CSS Baseline: The Good, The Bad And The Ugly.
• Stosowane w wielu elementach HTML: CodePen.
• Post na blogu Safari.
• Dlaczego jako projektant jestem podekscytowany(-a) funkcją text-box-trim.