Baltā telpa - CSS-triki | CSS almanahs 2025

Baltās atstarpes rekvizīts kontrolē, kā teksts tiek apstrādāts ar elementu, uz kuru tas tiek lietots. Pieņemsim, ka jums HTML ir tieši šāds:

 A bunch of words you see.

Jūs esat veidojis div, lai iestatītais platums būtu 100 pikseļi. Pie saprātīga fonta lieluma tas ir pārāk daudz teksta, lai ietilptu 100 pikseļos. Neveicot neko, noklusējuma white-spacevērtība ir normal, un teksts tiks iesaiņots. Skatiet piemēru zemāk vai sekojiet līdzi demonstrācijai mājās.

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

Ja vēlaties novērst teksta iesaiņošanu, varat pieteikties white-space: nowrap;

Paziņojums HTML koda piemērā šī raksta augšdaļā faktiski ir divi rindu pārtraukumi, viens pirms teksta rindas un viens aiz, kas ļauj tekstam atrasties savā rindā (kodā). Kad teksts tiek parādīts pārlūkprogrammā, šie rindu pārtraukumi parādās tā, it kā tie tiktu noņemti. Izņemtas arī papildu atstarpes uz līnijas pirms pirmā burta. Ja mēs vēlamies piespiest pārlūkprogrammu parādīt šos rindu pārtraukumus un papildu atstarpes rakstzīmes, kuras mēs varam izmantotwhite-space: pre;

To sauc, prejo uzvedība ir tāda, it kā jūs būtu iesaiņojis tekstu

tagi (kas pēc noklusējuma apstrādā atstarpi un līniju pārtraukumi tādā veidā). Baltā vieta tiek ievērota tieši tā, kā tā ir HTML, un teksts netiek aplauzts, kamēr kodā nav rindas pārtraukuma. Tas ir īpaši noderīgi, ja burtiski tiek parādīts kods, kam estētiski ir noderīgi daži formatējumi (un kāds laiks ir absolūti izšķirošs, tāpat kā no atstarpes atkarīgās valodās!)

Varbūt jums patīk, kā tiek preievērots atstarpes laukums un pārtraukumi, taču jums ir nepieciešams, lai teksts būtu jāiesaiņo, nevis potenciāli jāizlaužas no vecāku konteinera. Tas white-space: pre-wrap;ir paredzēts:

Visbeidzot, white-space: pre-line;pārtrauks līnijas vietās, kur tās pārtrauc kodā, bet papildu atstarpe joprojām tiek noņemta.

Interesanti, ka pēdējais līnijas pārtraukums netiek ievērots. Saskaņā ar CSS 2.1 specifikāciju: “Rindas tiek sadalītas pēc saglabātajām jaunrindas rakstzīmēm un, ja nepieciešams, lai aizpildītu rindu rūtiņas.” tāpēc varbūt tam ir jēga.

Šeit ir tabula, lai izprastu visu dažādo vērtību uzvedību:

	Jaunas rindas	Atstarpes un cilnes	Teksta iesaiņošana
normāli	Sakļaut	Sakļaut	Aptiniet
iepriekš	Saglabāt	Saglabāt	Nav iesaiņojuma
tagadrap	Sakļaut	Sakļaut	Nav iesaiņojuma
iepriekš iesaiņot	Saglabāt	Saglabāt	Aptiniet
pirms līnijas	Saglabāt	Sakļaut	Aptiniet

Ar CSS3, tad white-spaceīpašums ir burtiski gatavojas sekot šo diagrammu un kartēt īpašības text-space-collapseun text-wrapattiecīgi.

Vairāk informācijas

Mozilla Docs

Pārlūka atbalsts

Nedaudz sarežģītāks nekā parastā atbalsta tabula, jo katrai vērtībai ir atšķirīgs atbalsta līmenis:

Pārlūkprogramma	Versija	Atbalsts
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`