Baltoji erdvė - CSS-gudrybės | CSS almanachas 2025

Baltosios erdvės ypatybė kontroliuoja, kaip tekstas apdorojamas elementui, kuriam jis taikomas. Tarkime, kad HTML turite būtent tokį:

 A bunch of words you see.

Jūs sukūrėte div, kad nustatytas plotis būtų 100 taškų. Esant priimtinam šrifto dydžiui, per daug teksto, kad tilptų į 100 taškų. Nieko nedarant, numatytoji white-spacereikšmė yra normal, ir tekstas bus suvyniotas. Žiūrėkite žemiau pateiktą pavyzdį arba sekite demonstraciją namuose.

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

Jei norite, kad tekstas nevyniotų, galite kreiptis white-space: nowrap;

Šio straipsnio viršuje pateiktame HTML kodo pavyzdyje pastebima, kad iš tikrųjų yra dvi eilučių pertraukėlės, viena prieš teksto eilutę ir viena po jos, kurios leidžia tekstui būti savo eilutėje (kode). Kai tekstas pateikiamas naršyklėje, tie eilučių lūžiai rodomi taip, lyg jie būtų pašalinti. Taip pat išimami papildomi tarpai eilutėje prieš pirmąją raidę. Jei norime priversti naršyklę rodyti tuos eilučių pertraukimus ir papildomus baltojo tarpo simbolius, kuriuos galime naudotiwhite-space: pre;

Jis vadinamas, prenes elgiamasi taip, lyg būtum įvyniojęs tekstą

žymos (kurios pagal numatytuosius nustatymus taiko tarpą ir linijos pertraukos taip). Tuščia vieta laikoma tiksliai tokia, kokia yra HTML, ir tekstas nesivelia tol, kol kode nėra eilutės pertraukos. Tai ypač naudinga, kai pažodžiui rodomas kodas, kuriam estetiškai naudingas tam tikras formatavimas (o tam tikras laikas yra labai svarbus, kaip ir nuo baltosios erdvės priklausančiose kalbose!)

Galbūt jums patinka, kaip prelaikomasi baltos vietos ir pertraukos, bet jums reikia teksto suvynioti, o ne išsiveržti iš pirminės talpyklos. Tai ir white-space: pre-wrap;yra:

Galiausiai, white-space: pre-line;nutrauks eilutes ten, kur jie sulaužomi kodu, tačiau vis tiek išimta papildoma vieta.

Įdomu tai, kad paskutinė eilutės pertrauka nėra gerbiama. Kaip nurodyta CSS 2.1 specifikacijoje: „Linijos pertraukiamos išsaugotais naujos eilutės simboliais ir, jei reikia, užpildyti eilučių langelius.“ todėl galbūt tai yra prasminga.

Čia pateikiama lentelė, skirta suprasti visų skirtingų vertybių elgseną:

	Naujos eilutės	Tarpai ir skirtukai	Teksto vyniojimas
normalus	Sutraukti	Sutraukti	Apvyniokite
išankstinis	Išsaugoti	Išsaugoti	Be įvyniojimo
nowrap	Sutraukti	Sutraukti	Be įvyniojimo
iš anksto suvynioti	Išsaugoti	Išsaugoti	Apvyniokite
išankstinė linija	Išsaugoti	Sutraukti	Apvyniokite

Be CSS3, The white-spacenuosavybė yra tiesiog ketina sekti, kad diagramą ir map savybes, kad text-space-collapseir text-wrappakeisti.

Daugiau informacijos

„Mozilla Docs“

Naršyklės palaikymas

Šiek tiek sudėtingesnė nei įprasta palaikymo lentelė, nes kiekviena vertė turi skirtingą palaikymo lygį:

Naršyklė	Versija	Parama
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`
Opera	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`