Свойство white-space

Свойство white-space белгилайди matnни янги қаторга қандай бузиш, шунингдек сўзлар ораси бошлиқлари ва қатор бузилишларини (кодни теріш пайтида Enter босилган жойларни) қандай кўрсатишни.

Синтаксис

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

Қийматлар

Қиймат	Тасниф
`nowrap`	Matnни бошқа қаторга бузилишини тўхтатади, ҳатто у контейнернинг энига сиғмаса-да (бу ҳолда matn оддиги чегаралардан ташкарига чиқади). Бирок, `br` тегини қўшиш matnни янги қаторга бузилишига сабаб бўлади.
`pre`	Matn сайт версткасининг блокнотида терілганидек кўрсатилади: барча бошлиқлар ва enter-лар билан (агар кодда бир нечта бошлиқ терілган бўлса - экранда ҳам бир нечта бўлади). Шу билан бирга, браузер matnни янги қаторга бузмайди, агар у контейнерга сиғмаса - matn оддиги чегаралардан ташкарига чиқади. pre тегининг аналоги, лекин ундан фарқли ўларок шрифтни моноширинныйга ўзгартирмайди (моноширинный шрифт ҳақида қаранг свойство `font-family`.
`pre-wrap`	Pre билан ўхшаш, фарқ шундаки, агар matn жудa узун бўлиб контейнерга сиғмаса - браузер уни бошқа қаторга бузади.
`pre-line`	Браузер фақат HTML коддаги Enter-ларни ҳисобга олади ва ҳамма бошқа нарсаларни эътиборга олмайди (бир нечта бошлиқ бирта кўриниши мумкин, браузер қатор бузилишларини ўзи жойлаштиради).
`normal`	Стандарт ишлаш: браузер қатор бузилишларини ўзи жойлаштиради, сўзлар контейнерга сиғиши учун. Коддаги бир нечта бошлиқ экранда бирта кўриниши мумкин.

Стандарт қиймат: normal.

Мисол . Nowrap қиймати

Бу мисолда matn контейнерга сиғмайди ва унинг чегараларидан ташқарига чиқади, чунки 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 тегини қўшсанг - matн янги қаторга бузилади (анан 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 қиймати

Бу мисолда matн қандай кўриниши 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 код редакторида терілган бўлса шундай кўрсатади