White Space – Białe Znaki CSS

Białe znaki CSS

white-space

Podczas kurs HTML wspominaliśmy już o białych znakach (ang. white space), jest to enter, spacja oraz tabulator. W języku CSS możemy ustalić jak znaki te mają być przetwarzane. Domyślnie jeśli pozostawimy w naszym kodzie białe znaki, zostaną one pominięte, jednak są sposoby, aby je zachować. Własność white-space określa jak białe znaki mają być interpretowane. Własność ta określa również, czy tekst ma być naturalnie przeniesiony do nowej linii (zawijanie wierszy), czy pozostać na tej samej linii nie zważając na ograniczenia szerokości elementu, w którym się znajduje.

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

normal
Wartość domyślna. Wszelkie białe znaki (spacja, tab, enter) są pomijane w tekście oraz stosuje się naturalne zawijanie wierszy.

nowrap
Wartość nowrap (ang. nie zawijać) nie pozwala na naturalne zawijanie tekstu, tzn. na przenoszenie do następnej linii. Jeśli chcemy, tego dokonać musimy posłużyć się elementem <br>. Wszelkie białe znaki są pomijane.

p { white-space: nowrap; }

<p>Tekst zostanie przeniesiony do następnej linii jak użyjemy elementu &lt;br&gt; <br> inaczej tekst nie zostanie zawinięty.</p>

Jeśli element, bądź jego rodzic mają mniejszą szerokość niż ta zajmowana przez tekst, to tekst wyjdzie poza granice tych elementów.

p {
  white-space: nowrap;
  width: 300px;
  border: 1px solid #BEBEBE;
}

<p>Ten tekst wyjdzie poza granice elementu o szerokości 300px.</p>

pre
Wartość pre (ang. preserved – zachowane) spowoduje, że wszystkie białe znaki zostaną zachowane i wyświetlone. Jednak wartość ta powoduje, że jeśli sami nie przeniesiemy tekstu do nowej linii przy użyciu enter’a, bądź elementu <br> tekst sam nie zostanie zawinięty.

p {
  white-space: pre;
  width: 300px;
  border: 1px solid #BEBEBE;
}

<p>Wszystkie białe znaki w tym wielokrotne spacje entery
oraz również znaki tabulacji zostaną wyświetlone</p>

pre-wrap
Wartość pre-wrap (ang. preserved wrap – zachowane zawijanie) ta różni się od poprzedniej jedynie możliwością naturalnego zawijania tekstu, tak aby nie wychodził on poza ramkę.

p {
  white-space: pre-wrap;
  width: 300px;
  border: 1px solid #BEBEBE;
}

<p>Wszystkie białe znaki w tym wielokrotne     spacje entery
 oraz również znaki tabulacji zostaną wyświetlone</p>

pre-line
Wartość pre-line (ang. preserved line – zachowanie nowej linii) spowoduje, że wszystkie znaki oprócz znaku enter zostaną pominięte. Przeniesienie do następnej linii będzie możliwe poprzez enter, element <br>, bądź samoczynne zawinięcie się tekstu.