A white-space tulajdonság

A white-space tulajdonság beállítja, hogyan történjen a szöveg új sorba tördelése, valamint hogyan jelenjenek meg a szóközök a szavak között és a sortörések (azok a helyek, ahol a kód írása közben a Enter billentyűt lenyomtuk).

Szintaxis

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

Értékek

Érték	Leírás
`nowrap`	Megakadályozza, hogy a szöveg új sorba tördelessen, még akkor is, ha nem fér el a tároló szélességében (ebben az esetben a szöveg egyszerűen kilóg a határain). Azonban a `br` tag hozzáadása eredményezni fogja, hogy a szöveg új sorba tördelessen.
`pre`	A szöveg úgy jelenik meg, ahogy a weboldal kódolásakor a szerkesztőben be lett gépelve: minden szóközzel és enterrel együtt (ha a kódban több szóköz van beírva, a képernyőn is több fog megjelenni). Eközben a böngésző nem fogja a szöveget új sorba tördelni, ha az nem fér el a tárolóban - a szöveg egyszerűen kilóg a határain. Hasonló a pre taghez, de attól eltérően nem változtatja meg a betűtípust monospace-ra (a monospace betűtípusról lásd a `font-family` tulajdonságot.
`pre-wrap`	Ugyanaz, mint a pre, az eltérés annyi, hogy ha a szöveg túl hosszú és nem fér el a tárolóban - a böngésző új sorba fogja tördelni.
`pre-line`	A böngésző csak a HTML kódban lévő Enter-eket veszi figyelembe és figyelmen kívül hagyja minden mást (több szóköz úgy fog kinézni, mint egy, a böngésző maga helyezi el a sortöréseket).
`normal`	Alapértelmezett viselkedés: a böngésző maga helyezi el a sortöréseket úgy, hogy a szavak beleférjenek a tárolóba. Több szóköz a kódban úgy fog megjelenni a képernyőn, mint egy szóköz.

Alapértelmezett érték: normal.

Példa . A nowrap érték

Ebben a példában a szöveg nem fog beleférni a tárolóba és kilóg a határain, mivel a nowrap érték van beállítva:

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

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

Результат:

Példa . A nowrap érték és a br tag

Ha hozzáadunk egy br taget - a szöveg új sorba tördelessik (éppen ott a helyen, ahol a br tag áll):

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

Результат:

Példa . A pre érték

Ebben a példában a szöveg úgy jelenik meg, ahogy a HTML kód szerkesztőjében be lett gépelve (minden Tab billentyűvel készült behúzással, Enter billentyűvel és így tovább):

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

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

Результат:

Példa . A pre-wrap érték

Most viszont a szöveg úgy jelenik meg, ahogy a HTML kód szerkesztőjében be lett gépelve, azonban a kilógó részek új sorba tördelessnek:

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

Результат:

Lásd még

a word-break és a overflow-wrap tulajdonságok,
amelyek lehetővé teszik egy hosszú szó betűinek új sorba tördelését
a tab-size tulajdonság,
amely a Tab billentyűvel létrehozott behúzás méretét állítja be
a hyphens tulajdonság,
amely bekapcsolja a szavak szótagokra történő elválasztását
a overflow tulajdonság,
amely levágja a blokk határain kilógó részeket
a pre tag,
amely a szöveget úgy jeleníti meg, ahogy a HTML kód szerkesztőjében be lett gépelve