Vetoria white-space

Vetoria white-space përcakton si të transferohet teksti në një rresht të ri, si dhe si të shfaqen hapësirat midis fjalëve dhe thyerjet e rreshtave (vendet ku u shtyp Enter gjatë shkrimit të kodit).

Sintaksa

përzgjedhësi {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Vlerat

Vlera	Përshkrimi
`nowrap`	Ndalon tekstin të transferohet në një rresht tjetër, edhe nëse nuk përshtatet në gjerësinë e kontejnerit (në këtë rast, teksti thjesht do të dalë përtej kufijve të tij). Sidoqoftë, shtimi i tagut `br` do ta detyrojë tekstin të transferohet në një rresht të ri.
`pre`	Teksti shfaqet ashtu siç është shkruar në editor gjatë kodimit të faqes: me të gjitha hapësirat dhe enter-at (nëse në kod janë shkruar disa hapësira - në ekran do të shfaqen gjithashtu disa). Në këtë rast, shfletuesi nuk do ta transferojë tekstin në një rresht të ri, nëse ai nuk përshtatet në kontejner - teksti thjesht do të dalë përtej kufijve të tij. Analog i tagut pre, por ndryshe nga ai, nuk e ndryshon fontin në monospace (për fontin monospace shiko vetinë `font-family`.
`pre-wrap`	E njëjta gjë si pre, ndryshimi është se nëse teksti është shumë i gjatë dhe nuk futet në kontejner - shfletuesi do ta transferojë atë në një rresht tjetër.
`pre-line`	Shfletuesi merr parasysh vetëm Enter-at në kodin HTML dhe injoron çdo gjë tjetër (disa hapësira do të duken si një, shfletuesi vendos vetë thyerjet e rreshtave).
`normal`	Sjellja standarde: shfletuesi vendos vetë thyerjet e rreshtave në mënyrë që fjalët të përshtaten në kontejner. Disa hapësira në kod do të duken si një në ekran.

Vlera e paracaktuar: normal.

Shembull . Vlera nowrap

Në këtë shembull, teksti nuk do të përshtatet në kontejner dhe do të dalë përtej kufijve të tij, pasi është caktuar vlera nowrap:

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

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

Shembull . Vlera nowrap dhe tagu br

Nëse shtohet tagu br - teksti do të transferohet në një rresht të ri (pikërisht në atë vend, ku ndodhet br):

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

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

Shembull . Vlera pre

Në këtë shembull, teksti shfaqet ashtu siç është shkruar në redaktuesin e kodit HTML (me të gjitha dhëmbëzimet me tastin Tab, me Enter e kështu me radhë):

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

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

Shembull . Vlera pre-wrap

Tani teksti shfaqet ashtu siç ishte shkruar në redaktuesin e kodit HTML, megjithatë, pjesët që dalin përtej transferohen në një rresht të ri:

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

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

Shihni gjithashtu

vetitë word-break dhe overflow-wrap,
të cilat lejojnë që shkronjat e një fjale të gjatë të transferohen në një rresht të ri
vetia tab-size,
e cila përcakton madhësinë e dhëmbëzimit të krijuar nga tastiera Tab
vetia hyphens,
e cila aktivizon thyerjen e fjalëve në rrokje
vetia overflow,
e cila shkurton pjesët që dalin përtej kufirit të bllokut
tagu pre,
i cili tregon tekstin ashtu siç ishte shkruar në redaktuesin e kodit HTML