Tyhjä tila - CSS-temppuja | CSS-almanakka 2025

Tyhjä tila -ominaisuus ohjaa sitä, miten tekstiä käsitellään elementissä, johon sitä käytetään. Oletetaan, että sinulla on HTML tällä tavalla:

 A bunch of words you see.

Olet muotoillut div: n asetetuksi leveydeksi 100 kuvapistettä. Kohtuullisella kirjasinkoolla, se on liikaa tekstiä, jotta se mahtuu 100 kuvapisteeseen. Tekemättä mitään, oletusarvo white-spaceon normal, ja teksti kietoutuu. Katso alla oleva esimerkki tai seuraa demoa kotona.

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

Jos haluat estää tekstin kietoutumisen, voit hakea sitä white-space: nowrap;

Tämän artikkelin yläosassa olevan HTML-koodiesimerkin huomautus on itse asiassa kaksi rivinvaihtoa, yksi ennen tekstiriviä ja toinen sen jälkeen, mikä sallii tekstin olla omalla rivillään (koodissa). Kun teksti renderöidään selaimessa, nämä rivinvaihdot näkyvät ikään kuin ne poistettaisiin. Irrotetaan myös ylimääräiset välit rivillä ennen ensimmäistä kirjainta. Jos haluamme pakottaa selaimen näyttämään nämä rivinvaihdot ja ylimääräiset välilyönnit, joita voimme käyttääwhite-space: pre;

Sitä kutsutaan, prekoska käyttäytyminen on niin kuin olisit käärinyt tekstin sisään

tunnisteet (jotka käsittelevät oletuksena tyhjää tilaa ja viivat katkeavat tällä tavalla). Välilyönti kunnioitetaan täsmälleen samalla tavalla kuin se on HTML: ssä, eikä teksti kääri, ennen kuin koodissa on rivinvaihto. Tämä on erityisen hyödyllistä, kun kirjaimellisesti näytetään koodi, joka hyötyy esteettisesti joistakin muotoiluista (ja aika on ehdottoman tärkeää, kuten tyhjätilasta riippuvaisilla kielillä!)

Ehkä pidät siitä, kuinka prekunnioitetaan tyhjää tilaa ja rikkoutuu, mutta sinun on pakattava teksti käärittäväksi sen sijaan, että se mahdollisesti irtoaisi sen ylätasosta. Sitä white-space: pre-wrap;varten:

Lopuksi white-space: pre-line;katkaisee viivat kohdissa, joissa ne katkeavat koodissa, mutta ylimääräinen välilyönti on silti poistettu.

Mielenkiintoista on, että viimeistä rivinvaihtoa ei kunnioiteta. CSS 2.1 -määrityksen mukaan: "Rivit on rikki säilötyillä uuden rivin merkeillä ja tarpeen mukaan rivikenttien täyttämiseen." joten ehkä sillä on järkeä.

Tässä on taulukko, jossa ymmärretään kaikkien eri arvojen käyttäytyminen:

	Uudet rivit	Välilyönnit ja välilehdet	Tekstin kiteyttäminen
normaalia	Romahdus	Romahdus	Kääri
pre	Suojella	Suojella	Ei kääriä
nyt	Romahdus	Romahdus	Ei kääriä
esikääritä	Suojella	Suojella	Kääri
esilinja	Suojella	Romahdus	Kääri

CSS3: ssa white-spaceominaisuus kirjaimellisesti seuraa tätä kaaviota ja kartoittaa ominaisuudet text-space-collapseja text-wrapvastaavasti.

Lisää tietoa

Mozilla Docs

Selaimen tuki

Hieman monimutkaisempi kuin tavallinen tukitaulukko, koska jokaisella arvolla on erilainen tukitaso:

Selain	Versio	Tuki
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`
Ooppera	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`