Уласцівасць white-space

Уласцівасць white-space устанаўлівае як пераносіць тэкст на новы радок, а таксама як адлюстроўваць прабелы паміж словамі і пераносы радкоў (месцы, дзе быў націснуты Enter пры наборы кода).

Сінтаксіс

cssселектар {
  white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Значэнні

Значэнне	Апісанне
`nowrap`	Забараняе тэксту пераносіцца на другі радок, нават калі ён не змяшчаецца ў шырыню кантэйнера (у гэтым выпадку тэкст проста вылезе за яго межы). Аднак, даданне тэга `br` прымусіць тэкст перанесціся на новы радок.
`pre`	Тэкст адлюстроўваецца так, як быў набраны ў блокноце пры вёрстцы сайта: з усімі прабеламі і enter-амі (калі ў кодзе набрана некалькі прабелаў - на экране таксама будзе некалькі). Пры гэтым браўзэр не будзе пераносіць тэкст на новы радок, калі ён не змяшчаецца ў кантэйнер - тэкст проста вылезе за яго межы. Аналаг тэга pre, але ў адрозненне ад яго не мяняе шрыфт на манашырынны (пра манашырынны шрыфт гл. уласцівасць `font-family`.
`pre-wrap`	Toе ж самае, што і pre, адрозненне ў тым, што калі тэкст занадта доўгі і не змяшчаецца ў кантэйнер - браўзэр перанясе яго на другі радок.
`pre-line`	Браўзэр улічвае толькі Enter-ы ў HTML кодзе і ігнаруе ўсё астатняе (некалькі прабелаў будуць выглядаць як адзін, браўзэр сам расстаўляе разрывы радкоў).
`normal`	Стандартная паводзіны: браўзэр сам расстаўляе разрывы радка так, каб словы змясціліся ў кантэйнер. Некалькі прабелаў у кодзе будуць выглядаць як адзін на экране.

Значэнне па змаўчанні: normal.

Прыклад . Значэнне nowrap

У дадзеным прыкладзе тэкст не змясціцца ў кантэйнер і вылезе за яго межы, так як зададзена значэнне 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;
}

Результат:

Прыклад . Значэнне nowrap і тэг br

Калі дадаць тэг br - тэкст перанесца на новы радок (менавіта ў тым месцы, дзе стаіць 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;
}

Результат:

Прыклад . Значэнне pre

У дадзеным прыкладзе тэкст адлюстроўваецца так, як быў набраны ў рэдактары HTML кода (з усімі водступамі клавішай Tab, з Enter і так далей):

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

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

Результат:

Прыклад . Значэнне pre-wrap

А зараз тэкст адлюстроўваецца так, як быў набраны ў рэдактары HTML кода, аднак, тыя часткі, што выступаюць за межы, пераносяцца на новы радок:

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

Результат:

Глядзіце таксама

уласцівасці word-break і overflow-wrap,
якія дазваляюць перанесці літары доўгага слова на новы радок
уласцівасць tab-size,
якая ўстанаўлівае памер водступу, створанага клавішай Tab
уласцівасць hyphens,
якая ўключае пераносы словаў па складах
уласцівасць overflow,
якая абрэзае часткі, што выступаюць за мяжу блока
тэг pre,
які адлюстроўвае тэкст так, як ён быў набраны ў рэдактары HTML кода