Уласцівасць 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 кода