Autor publikacji: Virtual Patriot - Administrator

white-space

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - white-space property (LV3)

Przeznaczenie właściwości `white-space`

Za pomocą właściwości white-space możemy określić sposób traktowania przez przeglądarkę internetową białych znaków występujących w tekście interesującego nas elementu HTML.

Mowa tu o takich znakach jak:

znak spacji (klawisz SPACE)
znak tabulatora (klawisz TAB)
znak przejścia do nowej linii (klawisz ENTER)

Informacje dodatkowe: każda szerokość związana z właściwością white-space tyczy się szerokości logicznej

Informacje techniczne o właściwości `white-space`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: tak
wartość initial: normal
wyjątki initial: pre
animowanie: tak (animacja schodkowa)

Interpretacja właściwości `white-space`

: tak
: tak
: tak
: tak
: tak
: tak

Opis wartości właściwości `white-space`

normal

Wyjaśnienie

Wartość normal jest domyślną wartością właściwości white-space.

Cechy wartości `normal` właściwości `white-space`

kilka białych znaków nie może zostać wyświetlonych obok siebie
znak przejścia do nowej linii (klawisz ENTER) jest ignorowany
tekst elementu HTML jest przełamywany na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Przykład

  white-space:normal;

- brak kilku białych znaków obok siebie
- ignorowanie znaku przejścia do nowej linii
- przełamanie tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Domyślny sposób traktowania przez przeglądarkę internetową białych znaków występujących w tekście przykładowego elementu "div" nie został zmieniony.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:350px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

<div>- brak kilku       białych   znaków       obok       siebie<br>


- ignorowanie znaku przejścia do nowej linii<br>


- przełamanie tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML</div>

  </body>
</html>

pre

Wyjaśnienie

Za pomocą wartości pre właściwości white-space możemy zmienić sposób traktowania przez przeglądarkę internetową białych znaków występujących w tekście interesującego nas elementu HTML.

Cechy wartości `pre` właściwości `white-space`

kilka białych znaków może zostać wyświetlonych obok siebie
znak przejścia do nowej linii (klawisz ENTER) nie jest ignorowany
tekst elementu HTML nie jest przełamywany na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Przykład

  white-space:pre;

- kilka       białych   znaków       obok       siebie

- brak ignorowania znaku przejścia do nowej linii

- brak przełamania tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Sposób traktowania przez przeglądarkę internetową białych znaków występujących w tekście przykładowego elementu "div" został zmieniony, ponieważ do wspomnianego elementu "div" została dodana właściwość "white-space" wraz z wartością "pre".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        white-space:pre;
        width:350px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

<div>- kilka       białych   znaków       obok       siebie


- brak ignorowania znaku przejścia do nowej linii


- brak przełamania tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML</div>

  </body>
</html>

nowrap

Wyjaśnienie

Za pomocą wartości nowrap właściwości white-space możemy zmienić sposób traktowania przez przeglądarkę internetową białych znaków występujących w tekście interesującego nas elementu HTML.

Cechy wartości `nowrap` właściwości `white-space`

kilka białych znaków nie może zostać wyświetlonych obok siebie
znak przejścia do nowej linii (klawisz ENTER) jest ignorowany
tekst elementu HTML nie jest przełamywany na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Przykład

  white-space:nowrap;

- brak kilku białych znaków obok siebie
- ignorowanie znaku przejścia do nowej linii
- brak przełamania tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        white-space:nowrap;
        width:350px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

<div>- brak kilku       białych   znaków       obok       siebie<br>


- ignorowanie znaku przejścia do nowej linii<br>


- brak przełamania tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML</div>

  </body>
</html>

pre-wrap

Wyjaśnienie

Za pomocą wartości pre-wrap właściwości white-space możemy zmienić sposób traktowania przez przeglądarkę internetową białych znaków występujących w tekście interesującego nas elementu HTML.

Cechy wartości `pre-wrap` właściwości `white-space`

kilka białych znaków może zostać wyświetlonych obok siebie
znak przejścia do nowej linii (klawisz ENTER) nie jest ignorowany
tekst elementu HTML jest przełamywany na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Przykład

  white-space:pre-wrap;

- kilka       białych   znaków       obok       siebie

- brak ignorowania znaku przejścia do nowej linii

- przełamanie tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        white-space:pre-wrap;
        width:350px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

<div>- kilka       białych   znaków       obok       siebie


- brak ignorowania znaku przejścia do nowej linii


- przełamanie tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML</div>

  </body>
</html>

pre-line

Wyjaśnienie

Za pomocą wartości pre-line właściwości white-space możemy zmienić sposób traktowania przez przeglądarkę internetową białych znaków występujących w tekście interesującego nas elementu HTML.

Cechy wartości `pre-line` właściwości `white-space`

kilka białych znaków nie może zostać wyświetlonych obok siebie
znak przejścia do nowej linii (klawisz ENTER) nie jest ignorowany
tekst elementu HTML jest przełamywany na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Przykład

  white-space:pre-line;

- brak kilku białych znaków obok siebie - brak ignorowania znaku przejścia do nowej linii - przełamanie tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        white-space:pre-line;
        width:350px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

<div>- brak kilku       białych   znaków       obok       siebie


- brak ignorowania znaku przejścia do nowej linii


- przełamanie tekstu elementu HTML na końcu rozmiaru szerokości obszaru zawartości elementu HTML</div>

  </body>
</html>