Właściwość white-space

Właściwość white-space ustawia sposób zawijania tekstu do nowej linii, a także sposób wyświetlania spacji między słowami i znaków nowej linii (miejsc, gdzie wciśnięto Enter podczas pisania kodu).

Składnia

cssselektor {
  white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Wartości

Wartość	Opis
`nowrap`	Zabrania tekstowi zawijania się do nowej linii, nawet jeśli nie mieści się w szerokości kontenera (w tym przypadku tekst po prostu wyjdzie poza jego granice). Jednakże, dodanie znacznika `br` spowoduje przeniesienie tekstu do nowej linii.
`pre`	Tekst wyświetlany jest tak, jak został napisany w edytorze kodu HTML: ze wszystkimi spacjami i znakami enter (jeśli w kodzie wpisano kilka spacji - na ekranie również będzie ich kilka). Jednocześnie przeglądarka nie będzie zawijała tekstu do nowej linii, jeśli nie mieści się w kontenerze - tekst po prostu wyjdzie poza jego granice. Odpowiednik znacznika pre, ale w przeciwieństwie do niego nie zmienia czcionki na monospace (o czcionce monospace patrz właściwość `font-family`.
`pre-wrap`	To samo, co pre, różnica polega na tym, że jeśli tekst jest zbyt długi i nie mieści się w kontenerze - preglądarka przeniesie go do nowej linii.
`pre-line`	Przeglądarka uwzględnia tylko znaki Enter w kodzie HTML i ignoruje wszystko inne (kilka spacji będzie wyglądać jak jedna, przeglądarka sama rozstawia złamania linii).
`normal`	Standardowe zachowanie: przeglądarka sama rozstawia złamania linii tak, aby słowa zmieściły się w kontenerze. Kilka spacji w kodzie będzie wyglądać jak jedna na ekranie.

Wartość domyślna: normal.

Przykład . Wartość nowrap

W tym przykładzie tekst nie zmieści się w kontenerze i wyjdzie poza jego granice, ponieważ ustawiono wartość nowrap:

html<div id="elem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
}

Результат:

Przykład . Wartość nowrap i znacznik br

Jeśli dodać znacznik br - tekst przeniesie się do nowej linii (dokładnie w tym miejscu, gdzie znajduje się br):

html<div id="elem">
  Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
}

Результат:

Przykład . Wartość pre

W tym przykładzie tekst jest wyświetlany tak, jak został napisany w edytorze kodu HTML (ze wszystkimi wcięciami klawiszem Tab, z Enter i tak dalej):

html<div id="elem">
  Lorem ipsum
  
    dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: pre;
  border: 1px solid red;
}

Результат:

Przykład . Wartość pre-wrap

A teraz tekst jest wyświetlany tak, jak został napisany w edytorze kodu HTML, jednakże, wystające części są przenoszone do nowej linii:

html<div id="elem">
  Lorem ipsum
  
    dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: pre-wrap;
  border: 1px solid red;
}

Результат:

Zobacz też

właściwości word-break i overflow-wrap,
które pozwalają przenieść litery długiego słowa do nowej linii
właściwość tab-size,
która ustawia rozmiar wcięcia utworzonego klawiszem Tab
właściwość hyphens,
która włącza dzielenie wyrazów na sylaby
właściwość overflow,
która przycina części wystające poza granicę bloku
znacznik pre,
który wyświetla tekst tak, jak został napisany w edytorze kodu HTML