Cum de a schimba textul implicit de înfășurare cu HTML și CSS
Spre deosebire de hârtie, paginile web pot aproape infinit se extinde lateral. Atât de impresionant este că nu este ceva de care avem nevoie în timp ce citim. Browserul înfășoară text în funcție de lățimea containerului de text si lățimea ecranului astfel încât să putem vedea întregul text fără a trebui să defilați lateral mult (numai în jos).
Ambalaj este ceva ce browserele iau în considerare numeroși factori, cum ar fi limba textului sau plasarea punctelor de punctuație și a spațiilor - acestea nu doar împingeți în jos ce nu se potrivește în caseta definită pentru conținutul textului.
Altele decât împachetarea, browserele, de asemenea să aibă grijă de spații; ele îmbină mai multe spații consecutive din codul sursă într-un singur spațiu de pe pagina redată și, de asemenea, înregistrează pauze de linii forțate înainte de a începe să lucreze la ambalaj.
Când să schimbați implicit text wrapping
Asta e minunat și foarte apreciat. Dar, putem ajunge cu ușurință în situații în care comportamentul browserului implicit nu este ceea ce căutăm. Poate fi un titlu nu ar trebui să fie înfășurat sau un cuvânt într-un paragraf care mai bine fi rupt decât coborâți o linie, lăsând un spațiu gol în aer liber la capătul liniei.
S-ar putea să se întâmple și noi cu disperare au nevoie de acele spații păstrate în textul nostru, cu toate acestea, browser-ul continuă să le combine într-una, forțându-ne să adăugăm mai multe în codul sursă.
Preferințele de înfășurare ar putea, de asemenea schimbați cu limbajul și scopul textului. Un articol de știri despre Mandarin și un poem francez nu trebuie neapărat să fie împachetate în același mod.
Există un număr corect de proprietăți CSS (și elemente HTML!) Care pot controlați ambalajul și punctele de întrerupere Si deasemenea definiți modul în care spațiile și rupturile de linie sunt procesate înainte de înfășurare.
Posibilități de împachetare moale și pauze de împachetare moale
Browserele decid unde să înfășoare un text care să se reverse în funcție de limitele cuvintelor, cratime, silabe, punctuații, spații și multe altele. Toate aceste locuri sunt chemați oportunități de împachetare moale și când browserul rupe textul într-un astfel de loc, pauza este numită a împachetare moale.
Cea mai simplă cale forțați o pauză suplimentară se poate face folosind bunul vechi
Spatiu alb
Dacă sunteți familiarizați cu spatiu alb Proprietatea CSS Pariez că ai venit să-l cunoști mai întâi în același mod ca mulți alții; în timp ce caută o cale de a împiedica ambalarea textului. nowrap valoarea spatiu alb face exact asta.
Însă spatiu alb proprietatea este mai mult decât învelit. În primul rând, ce este spațiul alb? E o set de caractere spațiu. Fiecare spațiu din set variază unul de celălalt în lungime, direcție sau ambele.
Un tipic un singur caracter spațial orizontal este ceea ce adăugăm prin apăsarea tastei bara de spațiu. De asemenea, tasta Tab adaugă a spațiu similar, dar cu o lungime mai mare. Tasta Enter adaugă a spațiul vertical pentru a începe o nouă linie și în HTML adaugă a un singur spațiu intact la paginile web. Astfel, există o mulțime de spații care constituie “spatiu alb”.
După cum am menționat la început, browserele restrângeți mai multe spații (atât orizontală cât și verticală) din sursă într-un singur spațiu. Ei, de asemenea ia în considerare aceste caractere spațiu pentru a împacheta oportunități (locurile în care un text poate fi înfășurat) atunci când este necesară împachetarea.
Și, tocmai acele acțiuni ale browserului pe care le putem controla spatiu alb. Rețineți că spatiu alb proprietatea nu afectează toate tipurile de spațiu, doar cele mai frecvente cum ar fi spațiul unic orizontal obișnuit, spațiul tab și fluxurile de linii.
Mai jos, puteți vedea o captură de ecran a unui text exemplu care este înfășurat de browser pentru a se încadra în interiorul containerului. Excesul se întâmplă în partea de jos a recipientului, iar textul suprapus este colorat diferit. Veți observa colapsul spațiilor consecutive în cod.
A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Bună ziua¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut.
.textContainer width: 500px; înălțime: 320px;
După aplicarea spațiu alb: acum; regula, înfășurarea textului se modifică în felul următor:
.textContainer / * ... * / white-space: acum;
pre valoarea spatiu alb păstrează toate spațiile albe și împiedică înfășurarea textului:
.textContainer / * ... * / white-space: pre;
pre-wrap valoarea spatiu alb păstrează toate spațiile albe și împachetează textul:
.textContainer / * ... * / white-space: pre-wrap;
În cele din urmă, pre-line valoarea spatiu alb păstrează spațiile verticale cum ar fi linii noi și împachetează textul:
.textContainer / * ... * / white-space: pre-linie;
Pauzele de cuvinte
O altă proprietate CSS importantă pe care ar trebui să o cunoașteți pentru controlul textului este cuvânt-break. Puteți vedea în toate capturile de ecran de mai sus browser-ul înfășurat textul înaintea cuvântului “Salut” în partea dreaptă, dincolo de care text depășit. Browserul nu a spart cuvântul.
Cu toate acestea, dacă tu trebuie să permiteți ruperea literelor într-un cuvânt astfel încât textul ar arăta chiar și la partea dreaptă pe care trebuie să o utilizați break-toate valoare pentru cuvânt-break proprietate:
.textContainer / * ... * / word-break: break-all;
cuvânt-break Proprietatea are și o a treia valoare break-toate și normal (care aparține liniei de rupere prestabilită). pastreaza tot valoare nu permite ruperea cuvintelor.
S-ar putea să nu puteți vedea efectul pastreaza tot in engleza. Dar, în limbile în care sunt literele dintr-un cuvânt unități semnificative pe cont propriu, browserul ar putea sparge cuvintele când se înfășoară și acest lucru poate fi împiedicat pastreaza tot.
De exemplu, scrisori în cuvintele coreene, inițial rupt pentru ambalare, sunt păstrate împreună cand spațiu alb: păstrați-toate; regula este specificată.
A¬Â  ??¸AªA³Â ?? à «Â¥A¼ Ã-Â-Â¥Ã- ??  ?? à «Â         Â, ì          ¬A½Â ?? à  «??  ?? ë ¡A?? AAAA¬Â ?? Â-ì ??  ?? ì  ??¤. A¬Â                 ?? A¬Â          ¬A½AAAA?? AªAµÂ-ì  ?? AAAA¬Â ??  ?? ê °  ?? 1997à «Â ...  ?? 3¬ ??  ?? 10A¬Â  ??¼Ã «Â¶Â           ¬  ??¼AªA¹Â ?? ìA§A?? AAAA¬Â  ??¼A¬Â ??  ?? à «Â§Â ?? ì  ??¸A¬A¦Â ?? ìÂ- ?? ì ??  ?? A¬Â-´à «Â¦A½Ã «Â ??  ?? ë   ??¤. A¬A§Â ?? êA¸A?? à «Â ??  ± ë ¡ ?? Ã- ??  ?? ì ?? Â-ì ??  ?? ì  ??¤. A¬Â  ??´ AAAA¬Â ??  ?? ìÂ- ?? ì ??  ?? à «Â ??  ?? A¬Â    ªA³A?? A¬Â          ¬ ??  ?? A¬AAAA¬A¸AªÂ °  ?? à «Â ?? ¤A¬Â  ??´ Ã- ?? ¨AªÂ »Â ?? à «ÂªA¨A¬Â-¬ à «Â  ??¤A¬Â ??  ?? êA³A¼ AªÂ °  ?? ì ??  ?? à «Â¶Â ?? ì  ??¼Ã «Â¥A¼ à «Â  ??¤Ã «Â £ ¹à «Â ??  ?? ë   ??¤.
.textContainer / * ... * / word-break: păstrați-toate;
Această proprietate ar putea accepta o altă valoare numită break-cuvânt in viitor. Veți vedea cum break-cuvânt funcționează mai târziu, în “Înveliș de overflow” din acest articol.
Oportunități de întrerupere a cuvintelor
Dezvoltatorii pot, de asemenea adăugați oportunități de împachetare în interiorul cuvintelor, folosind
A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Hello¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut. A¢Â ??  ?? Salut.
.textContainer / * ... * / white-space: pre-wrap;
Fără
Cratima
cratime Proprietatea CSS este un alt mod de a controla pauzele dintre litere intr-un cuvant. Avem un articol separat despre despărțirea CSS dacă sunteți interesat (ă). Pe scurt, proprietatea vă permite să a crea oportunități de împachetare prin despărțire.
Este auto valoarea solicită browserului să ruperea automată a cuvintelor și ruperea cuvintelor acolo unde este necesar în timpul ambalării. manual valoare forțează browserele la wrap (dacă este necesar) la oportunitățile de decupare adăugate de noi, cum ar fi caracterul cratimă (‐) sau (liniuță moale). Dacă nici unul a fost dat ca valoare ar exista nici o împachetare făcută aproape de cratițe.
albastru albastru albastru albastru albastru albastru albastru albastru albastru albastru albastru albastru albastru
.textContainer / * ... * / -webkit-cratițe: auto; -ms-cratime: auto; cratime: auto;
Înveliș de overflow
preaplin-wrap Proprietatea CSS controlează dacă a browserul poate rupe cuvintele (sau spații păstrate, susținere pentru care s-ar putea întâmpla în viitorul apropiat) la depășire. Cand break-cuvânt valoarea este dată pentru preaplin-wrap, cuvantul va fi rupt in caz nu există alte oportunități de împachetare moale in linie.
Rețineți că preaplin-wrap este, de asemenea, cunoscut sub numele de cuvânt-wrap (sunt aliasuri).
bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse
.textContainer / * ... * / overflow-wrap: break-word;
Fără spațiu între literele din codul HTML de mai sus (adică nu există oportunități de împachetare), textul nu a fost înfășurat la început și a fost păstrat ca un singur cuvânt.
Cu toate acestea, când a fost acordată permisiunea de a împacheta textul prin ruperea cuvintelor (adică break-cuvânt valoarea a fost dată preaplin-wrap), împachetarea sa produs prin ruperea întregului șir ori de câte ori era necesar.
