White-space w CSS3

By /

CSS

Właściwość white-space w CSS3 jest używana do kontrolowania sposobu przetwarzania przez przeglądarkę białych znaków w tekście elementu oraz sposobu łamania linii. Pozwala ona na zachowanie odstępów, przerw w linii wprowadzanych w kodzie HTML, a także kontrolę nad automatycznym łamaniem linii. Jest to szczególnie przydatne w sytuacjach, gdy chcemy, aby tekst w naszej stronie internetowej był prezentowany dokładnie w taki sposób, jak został zapisany w kodzie HTML, bez automatycznego formatowania przez przeglądarkę.

Przykład użycia white-space w CSS3

Poniżej znajduje się przykład prostego kodu HTML z CSS, demonstrujący różne wartości właściwości white-space.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania white-space w CSS3</title>
    <style>
        .no-space {
            white-space: nowrap;
        }
        
        .pre-space {
            white-space: pre;
        }
        
        .pre-wrap {
            white-space: pre-wrap;
        }
        
        .pre-line {
            white-space: pre-line;
        }
        
        .normal-space {
            white-space: normal;
        }
        
        div {
            margin-bottom: 20px;
            border: 1px solid #000; /* Ramka do wizualizacji obszaru tekstu */
            padding: 10px;
        }
    </style>
</head>
<body>

    <div class="no-space">Ten tekst nie będzie łamany. Nawet jeśli przekroczy szerokość kontenera.</div>
    
    <div class="pre-space">Ten tekst     zachowa    wszystkie odstępy        i        przerwy w linii
tak jak w kodzie HTML.</div>
    
    <div class="pre-wrap">Ten tekst     zachowa    wszystkie odstępy        i        przerwy w linii
i zostanie złamany, gdy osiągnie koniec linii.</div>
    
    <div class="pre-line">Ten tekst     zachowa przerwy w linii
ale nie odstępy.</div>
    
    <div class="normal-space">Ten tekst będzie zachowywał standardowe zachowanie tekstu, łącząc wiele odstępów w jeden i łamiąc linie w odpowiednich miejscach.</div>

</body>
</html>

Wyjaśnienie działania white-space

  • nowrap zapobiega łamaniu linii, niezależnie od szerokości kontenera.
  • pre zachowuje białe znaki i przerwy w linii zgodnie z formatowaniem w kodzie HTML.
  • pre-wrap zachowuje białe znaki i przerwy w linii, ale dodatkowo łamie linie, gdy tekst przekracza szerokość kontenera.
  • pre-line zachowuje przerwy w linii, ale zlewa wielokrotne białe znaki w jeden.
  • normal jest wartością domyślną; łączy ciągi białych znaków w jeden i łamie linie w odpowiednich miejscach.

Podsumowanie

Właściwość white-space w CSS3 oferuje programistom front-endowym potężne narzędzie do kontroli wyświetlania tekstu na stronach internetowych. Umożliwia ona precyzyjne zarządzanie zachowaniem białych znaków i łamaniem linii, co jest szczególnie przydatne w przypadkach, gdy wymagane jest zachowanie specyficznego formatowania tekstu, takiego jak wiersze kodu, poezja, lub inne specyficzne formaty tekstu. Poprawne stosowanie tej właściwości pozwala na tworzenie czytelnych i estetycznie zadowalających układów tekstu, zwiększając użyteczność i estetykę projektowanych stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top