Tühimik - CSS-trikid | CSS-i almanahh 2025

Atribuut White-space reguleerib seda, kuidas tekstis käsitletakse elementi, millele seda rakendatakse. Oletame, et teil on HTML täpselt selline:

 A bunch of words you see.

Div on kujundatud nii, et seatud laius oleks 100 pikslit. Mõistliku fondisuuruse korral on see liiga palju teksti, et see mahuks 100 pikslisse. Ei tee midagi, vaikimisi white-spaceväärtus on normal, ja tekst murrab. Vaadake allolevat näidet või järgige demoga kodus kaasa.

div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )

Kui soovite takistada teksti mähkimist, saate seda taotleda white-space: nowrap;

Selle artikli ülaosas olevas HTML-koodi näites on teade, et tegelikult on kaks reavahet, üks enne tekstirida ja teine, mis võimaldavad tekstil olla oma rida (koodis). Kui tekst brauseris renderdatakse, ilmuvad need reavahetused justkui ribadeks. Samuti on eemaldatud lisatühikud joonel enne esimest tähte. Kui tahame sundida brauserit neid reavahetusi ja täiendavaid tühimärke kuvama, mida saame kasutadawhite-space: pre;

Seda nimetatakse, presest käitumine on selline, nagu oleksite teksti sisse mässinud

sildid (mis vaikimisi käsitlevad tühimikku ja reavahetused sellisel viisil). Valget ruumi austatakse täpselt nii, nagu see on HTML-is, ja teksti ei mähita enne, kui koodis on reavahe. See on eriti kasulik, kui kuvatakse sõna otseses mõttes kood, mis on esteetiliselt kasulik mõnest vormindusest (ja mõni aeg on absoluutselt oluline, nagu tühimikust sõltuvates keeltes!)

Võib-olla teile meeldib, kuidas preaustatakse tühimikku ja purustatakse, kuid peate selle mähkima, selle asemel et selle vanemmahutist välja murda. Selleks white-space: pre-wrap;on:

Lõpuks white-space: pre-line;murrab read seal, kus need koodis purunevad, kuid ekstra tühimik on endiselt eemaldatud.

Huvitaval kombel ei austata viimast reavahetust. Vastavalt CSS 2.1 spetsifikatsioonile: "Ridad on purustatud säilitatud uue rea tähemärkides ja vastavalt vajadusele ridakastide täitmiseks." nii et võib-olla on see mõistlik.

Siin on tabel kõigi erinevate väärtuste käitumise mõistmiseks:

	Uued read	Tühikud ja vahelehed	Teksti pakkimine
normaalne	Ahenda	Ahenda	Mähi
eel	Säilita	Säilita	Mähet pole
nüüd lahti	Ahenda	Ahenda	Mähet pole
eelnevalt mähkida	Säilita	Säilita	Mähi
eelliin	Säilita	Ahenda	Mähi

In CSS3 on white-spacemajutusasutus sõna otseses mõttes kavatseb jälgida, et skeem ja kaardistada omadusi text-space-collapseja text-wrapvastavalt.

Rohkem informatsiooni

Mozilla dokumendid

Brauseri tugi

Veidi keerulisem kui tavaline tugitabel, kuna igal väärtusel on erinev tugitase:

Brauser	Versioon	Toetus
Internet Explorer	5.5	`normal \| nowrap`
	6.0	`normal \| pre \| nowrap`
	8+	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Firefox (Gecko)	1,0 (1,0)	`normal \| pre \| nowrap \| -moz-pre-wrap`
	3,0 (1,9)	`normal \| pre \| nowrap \| pre-wrap \| -moz-pre-wrap`
	3,5 (1,9,1)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Ooper	4.0	`normal \| pre \| nowrap`
	8,0	`normal \| pre \| nowrap \| pre-wrap`
	9.5	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Safari (WebKit)	1,0 (85)	`normal \| pre \| nowrap`
Safari (WebKit)	3,0 (522)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`