АКЦЫЯ: бясплатныя месячныя курсы па стварэнні сайтаў
на выбар: вёрстка, JavaScript, PHP, Python або фрэймворкі. Сёння апошні дзень для запісу! Націскай!
29 of 313 menu

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

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

Сінтаксіс

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

Значэнні

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

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

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

У дадзеным прыкладзе тэкст не змясціцца ў кантэйнер і вылезе за яго межы, так як зададзена значэнне nowrap:

<div id="elem"> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div> #elem { width: 200px; white-space: nowrap; border: 1px solid red; }

:

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

Калі дадаць тэг br - тэкст перанесца на новы радок (менавіта ў тым месцы, дзе стаіць br):

<div id="elem"> Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire. </div> #elem { width: 200px; white-space: nowrap; border: 1px solid red; }

:

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

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

<div id="elem"> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div> #elem { width: 200px; white-space: pre; border: 1px solid red; }

:

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

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

<div id="elem"> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div> #elem { width: 200px; white-space: pre-wrap; border: 1px solid red; }

:

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

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