Ostatnio edytowany:

white-space

Autor: Virtual Patriot

Opis 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)

Dodatkowe techniczne informacje o właściwości white-space

przeznaczenie

element HTML każdego typu

dziedziczenie

tak

wartość initial

normal

wyjątki initial

pre

animowanie

nie (animacja nieciągła)

Interpretacja właściwości white-space

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

normal

Opis

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 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:#CBFFFF;
      }
    </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

Opis

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 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:#CBFFFF;
      }
    </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

Opis

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 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

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ą "nowrap".

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:#CBFFFF;
      }
    </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

Opis

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 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

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-wrap".

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:#CBFFFF;
      }
    </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

Opis

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 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

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-line".

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:#CBFFFF;
      }
    </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>