Kako promijeniti zadani tekst prelamanje s HTML i CSS

Za razliku od papira, web stranice mogu gotovo beskonačno se protežu bočno. Koliko god to bilo impresivno, to nije nešto što stvarno trebamo dok čitamo. Preglednici prelamaju tekst ovisno o širina spremnika za tekst i širina zaslona tako da možemo vidjeti cijeli tekst bez puno pomicanja u stranu (samo prema dolje).

pakiranje je nešto što preglednici rade s obzirom na mnoge čimbenike, kao što su jezik teksta ili položaj interpunkcije i razmaci - oni nemoj samo gurati dolje što se ne uklapa u okvir definiran za tekstualni sadržaj.

Osim omatanja, koriste se i preglednici voditi brigu o prostorima; spajaju višestruke uzastopne razmake u izvornom kodu na jedan prostor na prikazanoj stranici, a prije početka rada na omotu registriraju i prisilne prekide linija.

Kada promijeniti zadano prelamanje teksta

To je sve sjajno i cijenjeno. No, lako možemo završiti u okolnostima u kojima ponašanje zadanog preglednika nije ono što tražimo. To može biti naslov ne smije se omotati ili riječ u paragrafu bolje se razbiti nego se spustiti niz, ostavljajući prazan prazan prostor na kraju linije.

Može se također dogoditi da smo samo očajnički trebamo te prostore sačuvane u našem tekstu, međutim, preglednik ih kombinira u jedan, prisiljavajući nas da dodamo više u izvornom kodu.

Moguće su i postavke za omatanje promijenite jezik i svrhu teksta. Mandarinski novinski članak i francuska pjesma ne moraju nužno biti zamotani na isti način.

Postoji dosta CSS svojstava (i HTML elemenata!) Koja mogu kontrolirajte omatanje i prijelomne točke I također odredite kako se prije omatanja obrađuju prostori i prijelazi redaka.

Mogućnosti mekane folije i mekani omot

Preglednici odlučuju gdje će se omotati prepun tekst ovisno o granicama riječi, crtama, slogovima, interpunkcijama, razmacima i još mnogo toga. Ta mjesta su pozvana mogućnosti mekane folije i kada preglednik razbije tekst na jednom takvom mjestu, prekid se naziva a mekani omot.

Najjednostavniji način prisiliti na dodatni odmor može biti učinjeno pomoću dobrog starog
element.

Bijeli prostor

Ako ste upoznati s bijeli prostor CSS svojstvo Kladim se da ste ga najprije upoznali na isti način kao i mnogi drugi; dok tragate za načinom spriječiti omatanje teksta. nowrap vrijednost bijeli prostor radi upravo to.

Međutim bijeli prostor vlasništvo je više nego samo omatanje. Prije svega, što je razmak? To je skup znakova razmaka. Svaki prostor u setu međusobno se razlikuju u duljini, smjeru ili oboje.

Tipičan jedan horizontalni prostorni znak je ono što dodamo pritiskom na razmaknicu. Tipka Tab također dodaje a sličan prostor, ali s većom dužinom. Tipka Enter dodaje a vertikalni prostor za pokretanje novog retka i u HTML dodaje a jedan neprobojni prostor na web stranice. Ovako, postoji mnogo vrsta prostora koji čine “bijeli prostor”.

Kao što sam spomenuo na početku, preglednici Sažmi više mjesta (i vodoravno i okomito) u izvoru na jedan prostor. Oni također razmotrite te znakove prostora za mogućnosti omatanja (mjesta na kojima se tekst može zamotati) kada je potrebno omatanje.

I upravo s tim radnjama preglednika možemo kontrolirati bijeli prostor. Imajte na umu da bijeli prostor svojstvo ne utječe na sve vrste prostora, samo one najčešće kao što su regularni horizontalni pojedinačni razmak, prostor tabulatora i feedovi retka.

U nastavku možete vidjeti snimku zaslona uzorka teksta koji je zamotan u preglednik kako bi se uklopio u njegov spremnik. Preljev se događa na dnu spremnika, a preliveni tekst je različito obojen. Primijetit ćete kolaps uzastopnih prostora u kodu.

 
 Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? zdravo. 

 .textContainer width: 500px; visina: 320px;  

Nakon prijave bijeli prostor: nowrap; pravilo, omatanje teksta mijenja se na sljedeći način:

 .textContainer / *… * / white-space: nowrap;  

prije vrijednost bijeli prostor čuva sve razmake i sprječava omatanje teksta:

 .textContainer / *… * / bijeli prostor: pre;  

pre-wrap vrijednost bijeli prostor čuva sve razmake i oblaže tekst:

 .textContainer / *… * / white-space: pre-wrap;  

Konačno, unaprijed linija vrijednost bijeli prostor čuva okomite razmake kao što su nove linije i oblaže tekst:

 .textContainer / *… * / bijeli prostor: pre-line;  

Riječi se prekidaju

Još jedna važna CSS osobina koju biste trebali znati za kontroliranje prelamanja teksta je Riječ-break. Na svim prikazanim snimkama zaslona možete vidjeti preglednik omotao tekst prije riječi “zdravo” na desnoj strani, iza koje tekst prepun. Preglednik nije slomio riječ.

Međutim, ako vi moram dopustiti razbijanje slova u riječi da bi tekst izgledao čak i na desnoj strani, morate koristiti break-sve vrijednost za Riječ-break nekretnine:

 .textContainer / *… * / word-break: break-all;  

Riječ-break vlasništvo ima i treću vrijednost break-sve i normalan (pripada zadanom lomu linije). zadrži sve vrijednost ne dopušta lomljenje riječi.

Možda nećete moći vidjeti učinak zadrži sve na engleskom. No, u jezicima gdje su slova u riječi samostalne jedinice, preglednik može slomiti riječi prilikom omatanja, a to se može spriječiti zadrži sve.

Na primjer, slova u korejskim riječima, u početku je slomljen za omatanje, drže se zajedno kada bijeli prostor: čuvajte sve; je navedeno pravilo.

ì?? Â¸ĂªÂ³Â ??  «Â¥Â¼ A-a-A¥A-a ??  ?? à «Â ??  ?? Ã- ??  ??, ì      Â?¬Â½Â ??  «Â ??  ?? « ¡ ?? A-a ??  ?? ¬ ?? A-a¬Â ??  ?? ¬?? ¤. ì  ?? 10Ã- ?? ì      Â?¬Â½Â ??  «Â ??  ?? ĂªÂµA-a¬Â  ?? A-a ??  ?? ¬ ??  ?? ª °  ?? 1997 «…  ?? 3A¬Â ??  ?? 10A¬?? ¼ «Â¶Â? Ã- °  ° 12ì?? Â¼ĂªÂ¹Â ?? ¬§ ?? à «Â ?? Â… ì?? Â¼Ă¬Â ??  ??  «Â§Â ?? ¬?? ¸ì¦ ?? ¬A-a ?? ì ??  ?? ìA-a´Â «Â¦Â½Â «??  ?? «  ?? ¤. 짠?? ª¸ ??  «Â ??  ± ë¡ ?? A-a ??  ?? ¬ ?? A-a¬Â ??  ?? ¬?? ¤. ì?? ´ A-a ??  ?? ¬ ??  ?? ¬A-a ?? ì ??  ??  «Â ??  ?? ìÂ-Â… ê³ ?? ìÂ? à «Â °  ?? ì ??  ?? ì  ?? à «Â¬Â¸ĂªÂ °  ??  «Â ?? ¤ì?? ´ A-a ?? Â¨ĂªÂ »Â ??  «ÂªÂ¨Ă¬A-a¬  «Â ?? ¤ì ??  ?? ª³¼ ĂªÂ °  ?? ì ??  ??  «Â¶Â ?? ¬?? ¼ «Â¥Â¼  «Â ?? ¤ «Â £ ¹ «??  ?? «  ?? ¤.

 .textContainer / *… * / word-break: zadrži sve;  

Ovo svojstvo može podržavati drugu vrijednost koja se zove break-riječ u budućnosti. Vidjet ćete kako break-riječ radi kasnije “Preljevni omot” ovog članka.

Word break mogućnosti

Programeri također mogu dodajte mogućnosti umotavanja unutar riječi, koristiti HTML element. Ako preglednik mora omotati tekstualni niz, razmotrit će mjesto na kojem je prisutna za mogućnost omatanja.

 
 Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Hello â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? Zdravo. Ă¢Â ??  ?? zdravo. 
 

 .textContainer / *… * / white-space: pre-wrap;  

Bez , u cjelini “zdravo” Riječ bi bila prikazana u novom retku. Dodavanjem u HTML kôd obavijestili smo preglednik u redu je razbiti riječ u tom trenutku za omatanje, u slučaju da je potrebno.

crtice

crtice CSS svojstvo je drugi način kontrole prekida između slova u jednoj riječi. Ako ste zainteresirani, imamo poseban članak o CSS crtanju riječi. Ukratko, vlasništvo vam omogućuje stvoriti mogućnosti omatanja pomoću crtanja riječi.

svoj auto vrijednost traži od preglednika automatski podijeliti i razbiti riječi po potrebi tijekom omatanja. priručnik vrijednost prisiljava preglednike na zamotajte (ako je potrebno) mogućnosti dodavanja riječi koje smo dodali, kao što je znak crtice (‐) ili ­ (mekana crtica). Ako nijedan dano je kao vrijednost nema umatanja u blizini crtica.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

 .textContainer / *… * / -webkit-crtice: auto; -ms-crtice: auto; crtice: auto;  

Preljevni omot

preljev-wrap CSS svojstvo kontrolira ako a preglednik može prekršiti riječi (ili sačuvani prostori, podrška za koje se može dogoditi u bliskoj budućnosti) na prelijevanje. Kada break-riječ vrijednost za preljev-wrap, riječ će biti slomljena u slučaju ne postoje druge mogućnosti mekane folije u redu.

Zapamtite to preljev-wrap je također poznat kao Riječ-folijom (oni su pseudonimi).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / preljevna obloga: break-word;  

Bez slova između slova u gore navedenom HTML kôdu (tj. Nema mogućnosti omatanja), tekst nije prvo bio omotan i sačuvana je kao jedna riječ.

Međutim, kada je dano dopuštenje za omatanje teksta razbijanjem riječi (tj break-riječ vrijednost je dana preljev-wrap), omatanje se dogodilo razbijanjem cijelog niza gdje god je bilo potrebno.