Białe znaki - CSS-Tricks | Almanach CSS 2025

Właściwość odstępu kontroluje sposób obsługi tekstu w elemencie, do którego jest stosowany. Załóżmy, że masz taki kod HTML:

 A bunch of words you see.

Ustawiłeś styl elementu div tak, aby miał ustawioną szerokość 100 pikseli. Przy rozsądnym rozmiarze czcionki to za dużo tekstu, aby zmieścić się w 100 pikselach. Bez robienia czegokolwiek white-spacewartość domyślna to normal, a tekst zostanie zawinięty. Zobacz poniższy przykład lub wykonaj w domu prezentację.

div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )

Jeśli chcesz zapobiec zawijaniu się tekstu, możesz zastosować white-space: nowrap;

Zauważ, że w przykładzie kodu HTML na początku tego artykułu są w rzeczywistości dwa podziały wierszy, jeden przed wierszem tekstu i jeden po nim, co pozwala na umieszczenie tekstu w osobnym wierszu (w kodzie). Kiedy tekst jest renderowany w przeglądarce, te podziały wierszy wyglądają tak, jakby zostały usunięte. Usunięte są również dodatkowe spacje w wierszu przed pierwszą literą. Jeśli chcemy zmusić przeglądarkę do wyświetlania tych podziałów wierszy i dodatkowych białych znaków, których możemy użyćwhite-space: pre;

Jest wywoływana, preponieważ zachowuje się tak, jakbyś zawinął tekst

znaczniki (które domyślnie obsługują w ten sposób spacje i znaki końca linii). Białe znaki są honorowane dokładnie tak, jak w kodzie HTML, a tekst nie jest zawijany, dopóki w kodzie nie ma końca wiersza. Jest to szczególnie przydatne przy dosłownym wyświetlaniu kodu, co jest korzystne pod względem estetycznym dzięki niektórym formatom (a jakiś czas jest absolutnie kluczowy, jak w językach zależnych od białych znaków!)

Być może podoba Ci się sposób, w jaki prehonoruje białe znaki i przerwy, ale potrzebujesz tekstu do zawijania zamiast potencjalnego wyrywania się z jego kontenera nadrzędnego. Do tego white-space: pre-wrap;służy:

Wreszcie, white-space: pre-line;spowoduje przerwanie wierszy w miejscach, w których pękają w kodzie, ale dodatkowe białe znaki są nadal usuwane.

Co ciekawe, ostatnie przełamanie linii nie jest honorowane. Zgodnie ze specyfikacją CSS 2.1: „Wiersze są przerywane przy zachowanych znakach nowej linii i w razie potrzeby do wypełniania pól linii”. więc może to ma sens.

Oto tabela, w której można zrozumieć zachowanie wszystkich różnych wartości:

	Nowe linie	Spacje i tabulatory	Zawijanie tekstu
normalna	Zawalić się	Zawalić się	Owinąć
przed	Zachować	Zachować	Bez opakowania
nowrap	Zawalić się	Zawalić się	Bez opakowania
pre-wrap	Zachować	Zachować	Owinąć
pre-line	Zachować	Zawalić się	Owinąć

W CSS3 The white-spacenieruchomość jest dosłownie zamiar podążać tą tabelę i mapowania właściwości text-space-collapsei text-wrapodpowiednio.

Więcej informacji

Dokumenty Mozilli

Wsparcie przeglądarki

Nieco bardziej złożona niż zwykła tabela wsparcia, ponieważ każda wartość ma inny poziom wsparcia:

Przeglądarka	Wersja	Wsparcie
Internet Explorer	5.5	`normal \| nowrap`
	6.0	`normal \| pre \| nowrap`
	8+	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Firefox (Gecko)	1, 0 (1, 0)	`normal \| pre \| nowrap \| -moz-pre-wrap`
	3,0 (1,9)	`normal \| pre \| nowrap \| pre-wrap \| -moz-pre-wrap`
	3, 5 (1, 9, 1)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Opera	4.0	`normal \| pre \| nowrap`
	8.0	`normal \| pre \| nowrap \| pre-wrap`
	9.5	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Safari (WebKit)	1, 0 (85)	`normal \| pre \| nowrap`
Safari (WebKit)	3,0 (522)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`