CSS white-space, czyli kontroluj wyświetlanie białych znaków

Ewa Klimowicz

22 stycznia, 2024

3 min

• Praca w IT
• Artykuły

Ostatnia aktualizacja 22 stycznia, 2024

Właściwość white-space w CSS kontroluje sposób wyświetlania białych znaków i przełamywania wierszy w tekstach. W tym artykule omówimy różne wartości white-space i zaprezentujemy przykłady ich zastosowania, aby lepiej zrozumieć ich wpływ na układ tekstu.

• Właściwość CSS white-space jest niezbędna do kontroli sposobu wyświetlania białych znaków i zarządzania przełamywaniem wierszy w tekstach na stronach internetowych.
• Dostępne wartości white-space, czyli normal, nowrap, pre, pre-wrap i pre-line udostępniają różne metody zarządzania zachowaniem białych znaków i przełamywania linii.
• Stosowanie różnych ustawień white-space pozwala na tworzenie czytelnych i dobrze zorganizowanych układów tekstowych, dopasowanych do specyficznych potrzeb projektowych strony internetowej.

Na czym polega CSS white-space?

Właściwość white-space w CSS kontroluje, jak białe znaki (spacje, tabulacje i nowe linie) są traktowane w elemencie HTML. Pozwala także na zarządzanie automatycznym przełamywaniem wierszy.

Wartości właściwości white-space

• normal: Jest to domyślna wartość. Białe znaki są łączone, a tekst automatycznie przechodzi do nowego wiersza, gdy osiąga koniec kontenera.
• nowrap: Zapobiega automatycznemu przełamywaniu wierszy. Tekst kontynuuje się w jednej linii, dopóki nie zostanie wymuszony przełom.
• pre: Białe znaki są zachowywane tak, jak w HTML. Tekst nie będzie automatycznie przechodził do nowego wiersza, chyba że zostanie to wyraźnie określone.
• pre-wrap: Zachowuje białe znaki, ale również pozwala na automatyczne przełamywanie wierszy.
• pre-line: Łączy białe znaki, ale zachowuje przełomy wierszy.

Użycie white-space z wartością normal

Tekst w tym stylu będzie łączył białe znaki i automatycznie przełamywał wiersze.

.normal-text {
  white-space: normal;
}

Białe znaki z wartością nowrap

Tekst nie przejdzie do nowego wiersza, chyba że zostanie to wymuszone.

.nowrap-text {
  white-space: nowrap;
}

Dalsza część tekstu znajduje się pod materiałem wideo:

Białe znaki z wartością pre

Zachowuje formatowanie tak, jak w kodzie HTML, łącznie z białymi znakami.

.pre-text {
  white-space: pre;
}

Kontrola białych znaków z wartością pre-wrap

Zachowuje białe znaki, ale umożliwia automatyczne przełamywanie wierszy.

.prewrap-text {
  white-space: pre-wrap;
}

Białe znaki z wartością pre-line

Łączy białe znaki, ale zachowuje naturalne przełomy wierszy.

.preline-text {
  white-space: pre-line;
}

Zrozumienie i właściwe stosowanie właściwości white-space w CSS jest istotne dla tworzenia czytelnych i dobrze zorganizowanych układów tekstowych na stronach internetowych. Eksperymentowanie z różnymi wartościami może pomóc w osiągnięciu pożądanego efektu wyświetlania tekstu.

Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.

Czytaj także:

CSS to kaskadowe arkusze stylów

Znacznik br w HTML. Kiedy i jak go używać