White-space häsiýeti

white-space häsiýeti tekstiň nähili täze setre geçmelidigini, şeýle hem sözler arasyndaky boşluklary we setir dargamalaryny (kody ýazýanda Enter basylan ýerleri) nähili görkezmeli bolýandygyny kesgitleýär.

Sintaksis

cssselektor {
  white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Görnüşleri

Görnüşi	Düşündirişi
`nowrap`	Tekstiň başga bir setre geçmegine päsgel berýär, hatda ol konteýneriň inişine sığmasa-da (bu ýagdaýda tekst ýöne onuň çäginden daşary çykar). Emma, `br` tegini goşmak teksti täze setre geçmäge mejbur eder.
`pre`	Tekst, saýt düzülýärken tekst redaktorynda ýazylanda ýaly görkezilýär: ähli boşluklar we enterlar bilen (eger kodda birnäçe boşluk ýazylan bolsa - ekranda hem birnäçe bolar). Şol bir wagtyň özünde brauzer teksti täze setre geçirmez, eger ol konteýnerä sığmasa - tekst ýöne onuň çäginden daşary çykar. pre teginiň deňi, ýöne ondan tapawutlylykda şrifti monogenli şrifte üýtgetmeýär (monogenli şrift barada `font-family` häsiýetine serediň.
`pre-wrap`	Pre bilen deň, tapawut şonda, eger tekst örän uzyn bolsa we konteýnerä sığmasa - brauzer ony başga bir setre geçirer.
`pre-line`	Brauzer diňe HTML kodundaky Enter-lary hasaplaýar we galan hemme zady ýada salýar (birnäçe boşluk bir ýaly görüner, brauzer setir dargamalaryny özi ýerleşdirýär).
`normal`	Standart hereket: brauzer setir dargamalaryny özi sözleriň konteýnerä sığşy ýaly ýerleşdirýär. Kodda birnäçe boşluk ekranda bir ýaly görüner.

Bellige göräniň görnüşi: normal.

Mysal . Nowrap görnüşi

Bu mysalda tekst konteýnerä sığmaz we onuň çäginden daşary çykar, sebäbi nowrap görnüşi bellidir:

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

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

Результат:

Mysal . Nowrap görnüşi we br tegi

Eger br tegini goşsaňyz - tekst täze setre geçer (edil br duran ýerde):

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

Результат:

Mysal . Pre görnüşi

Bu mysalda tekst, HTML kodunyň redaktorynda ýazylan ýaly görkezilýär (ähli Tab klawişasy bilen düzülen boşluklar, Enter we şuňa meňzeşler bilen):

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

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

Результат:

Mysal . Pre-wrap görnüşi

Indi bolsa tekst, HTML kodunyň redaktorynda ýazylan ýaly görkezilýär, ýöne, daşary çykyan bölekler täze setre geçirilýär:

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

Результат:

Şeýle-de serediň

word-break we overflow-wrap häsiýetleri,
olar uzyn sözüň harp-laryny täze setre geçirmäge rugsat berýär
tab-size häsiýeti,
ol Tab klawişasy bilen düzülen boşlugyň ölçegini kesgitleýär
hyphens häsiýeti,
ol sözleri bukulmalar boýunça geçirmäge açýar
overflow häsiýeti,
ol blogyň çäginden daşary çykan bölekleri gyrýar
pre tegi,
ol tekst HTML kodunyň redaktorynda ýazylanda ýaly görkezýär