Wklejasz tekst z edytora do komponentu, a przeglądarka skleja kilka spacji i ignoruje podziały wierszy. Zwykle pomaga `white-space: pre-wrap`, ale jeśli problemem jest długi identyfikator bez spacji, ta właściwość sama nie zapobiegnie wychodzeniu tekstu poza kontener.
Dobierz white-space do tego, co ma zachować tekst
- `normal` scala wielokrotne spacje i pozwala zawijać tekst.
- `pre-wrap` zachowuje spacje oraz podziały wierszy, a tekst nadal zawija.
- `pre-line` zachowuje podziały wierszy, ale scala wielokrotne spacje.
- `nowrap` wyłącza zawijanie, więc długi tekst może rozepchnąć układ.
- `break-spaces` zachowuje spacje i umożliwia łamanie w ich ciągu.
Ta właściwość steruje spacjami i zawijaniem jednocześnie
W HTML kilka spacji wpisanych obok siebie zwykle wygląda jak jedna, a Enter w kodzie źródłowym nie musi oznaczać widocznego końca wiersza. Właściwość `white-space` decyduje, czy przeglądarka scali białe znaki oraz czy tekst może przechodzić do kolejnej linii.
Uważam, że najłatwiej myśleć o niej jak o dwóch ustawieniach w jednym: zachowywanie białych znaków i zawijanie tekstu. Dlatego podobnie brzmiące wartości mogą dać różny efekt: jedna zachowa Entery, druga spacje, a jeszcze inna wyłączy zawijanie.
Wybierz wartość według oczekiwanego efektu
Najczęściej zaczyna się od `normal`, czyli domyślnego zachowania tekstu. Pozostałe wartości dobieraj do tego, co ma pozostać widoczne po renderowaniu, a nie do samej nazwy właściwości.
| Wartość | Wielokrotne spacje | Podziały wierszy ze źródła | Zawijanie tekstu | Typowe użycie |
|---|---|---|---|---|
| `normal` | Są scalane | Nie są zachowywane | Tak | Zwykłe akapity i etykiety |
| `nowrap` | Są scalane | Nie są zachowywane | Nie | Krótki element, który ma pozostać w jednym wierszu |
| `pre` | Są zachowywane | Są zachowywane | Nie | Tekst o stałym formatowaniu, gdy poziome przewijanie jest akceptowalne |
| `pre-wrap` | Są zachowywane | Są zachowywane | Tak | Wiadomości użytkowników lub treść z edytora |
| `pre-line` | Są scalane | Są zachowywane | Tak | Tekst, w którym liczą się Entery, ale nie dodatkowe odstępy |
| `break-spaces` | Są zachowywane | Są zachowywane | Tak, także między zachowanymi spacjami | Tekst, w którym znaczenie mają również końcowe spacje |
W codziennym interfejsie wybór często sprowadza się do `normal`, `pre-wrap` albo `pre-line`. `pre` i `nowrap` mogą poszerzyć element, jeśli zawartość nie mieści się w dostępnej przestrzeni, a `break-spaces` zachowuje się odmiennie przy łamaniu ciągów spacji. Aktualny opis tej właściwości znajdziesz w dokumentacji MDN.
Pre-wrap zachowuje tekst użytkownika, ale nie łamie każdego ciągu
Załóżmy, że pole komentarza przechowuje tekst `Pierwszy wiersz`, Enter, a potem `Drugi wiersz` z kilkoma spacjami. Przy `normal` podział i nadmiarowe odstępy znikną wizualnie; przy `pre-line` zostanie podział, ale ciąg spacji się skurczy. Dopiero `pre-wrap` zachowa oba elementy, jednocześnie pozwalając zawijać zwykłe słowa.
.comment {
white-space: pre-wrap;
}Jest jednak haczyk: w tekście może trafić się adres, token lub identyfikator bez żadnego miejsca, w którym przeglądarka może go złamać. Wtedy `pre-wrap` nie wystarczy. Dodaj osobną regułę łamania długich słów, na przykład `overflow-wrap: anywhere`:
.comment {
white-space: pre-wrap;
overflow-wrap: anywhere;
}To rozdzielenie odpowiedzialności ułatwia diagnozę. `white-space` obsługuje spacje i zawijanie wierszy, a `overflow-wrap` pomaga, gdy pojedynczy ciąg znaków nie ma naturalnego punktu łamania.
Gdy układ się rozjeżdża, znajdź rodzaj białego znaku
Tekst wystający poza kartę nie zawsze oznacza, że trzeba zmienić `white-space`. Przyczyna może tkwić w wartości `nowrap`, długim ciągu bez spacji albo w wymaganiu zachowania końcowych odstępów. Najpierw rozpoznaj, co dokładnie ma się wydarzyć:
| Sytuacja | Prawdopodobna przyczyna | Co zrobić |
|---|---|---|
| Tekst z edytora traci Entery | Element ma `normal`, które nie zachowuje podziałów ze źródła | Ustaw `pre-wrap`, jeśli dodatkowe spacje również mają zostać |
| Entery zostają, ale kilka spacji wygląda jak jedna | `pre-line` zachowuje podziały, lecz scala sekwencje spacji | Użyj `pre-wrap`, jeśli odstępy są częścią treści |
| Cały wiersz mieści się poza kartą | `nowrap` albo `pre` wyłącza zawijanie | Włącz zawijanie, zmieniając wartość na `normal` lub `pre-wrap` |
| Po zmianie na `pre-wrap` długi token nadal wystaje | Brakuje naturalnego miejsca na złamanie ciągu | Dodaj `overflow-wrap: anywhere` |
| Końcowe spacje mają pozostać widoczne i zajmować miejsce | Standardowe zachowanie zachowanych spacji może je inaczej układać przy końcu wiersza | Sprawdź `break-spaces` |
Ostatni przypadek łatwo przeoczyć podczas pracy nad edytorem tekstu lub wizualizacją danych. Według specyfikacji CSS Text Module Level 4 `break-spaces` daje możliwość złamania po każdej zachowanej spacji, a takie spacje nie „zwisają” poza koniec wiersza i wpływają na rozmiar minimalny treści. To precyzyjniejszy wybór niż `pre-wrap`, gdy liczy się każdy odstęp.
Rozdziel zachowanie białych znaków od łamania słów
W opisach CSS starsze poradniki często przedstawiają `white-space` jako listę kilku niezależnych trybów. W nowszym modelu właściwość jest skrótem dla `white-space-collapse` i `text-wrap-mode`, co pozwala opisywać te zachowania osobno. Na przykład `white-space: preserve nowrap` zachowuje białe znaki i wyłącza zawijanie.
Nie musisz jednak przepisywać istniejącego arkusza na nową składnię, by poprawnie używać typowych wartości takich jak `normal`, `pre-wrap` czy `pre-line`. W praktyce polecałbym zacząć od czytelnej wartości skróconej, a właściwości składowe stosować wtedy, gdy naprawdę potrzebujesz niezależnie kontrolować oba zachowania. Pełny podział i jego konsekwencje opisuje dokumentacja white-space-collapse w MDN.
Najpierw zachowaj treść, potem dopracuj jej łamanie
Jeśli tekst pochodzi od użytkownika i jego podziały mają znaczenie, zacznij od `pre-wrap`; gdy problemem jest pojedynczy, bardzo długi ciąg, dołącz `overflow-wrap: anywhere`. Jeśli zachowujesz tylko Entery, wybierz `pre-line`, a przy zwykłym tekście pozostaw `normal`.
Prawdę mówiąc, najwięcej kłopotów bierze się z traktowania wszystkich problemów z tekstem jak jednego problemu ze spacjami. Gdy rozdzielisz zachowywanie białych znaków od łamania słów, łatwiej dobrać regułę bez psucia układu mobilnego.
