Sådan ændres standardtekstpakning med HTML og CSS
I modsætning til papir kan websider strækker sig næsten uendeligt sidelæns. Så meget som imponerende det er, det er ikke noget, vi virkelig har brug for under læsning. Browsere indpakker tekst afhængigt af tekstbeholderens bredde og bredden af skærmen så vi kan se hele teksten uden at skulle rulle sidelæns meget (kun nedad).
Indpakning er noget, som browsere overvejer mange faktorer, såsom sprogets sprog eller placeringen af tegnsætning og mellemrum-de Skub ikke bare ned Hvad passer ikke i boksen, der er defineret for tekstindholdet.
Bortset fra indpakning, også browsere tage sig af rummene; de fusionerer flere sammenhængende rum i kildekoden i et enkelt rum på den gengivne side, og de registrerer også tvunget linjeskift, inden de begynder at arbejde på indpakningen.
Hvornår skal du ændre standardtekstindpakning
Det er alt godt, og meget værdsat. Men vi kan let ende op under omstændigheder, hvor standard browser opførsel ikke er det, vi leder efter. Det kan være en overskrift, der bør ikke pakkes ind eller et ord i et afsnit der bedre blive brudt end at gå ned en linje, forlader et ulige udseende tomt rum i slutningen af linjen.
Det kan også ske, at vi bare desperat har brug for disse mellemrum bevaret i vores tekst, men browseren holder sammen med at kombinere dem til en, hvilket tvinger os til at tilføje flere i kildekoden.
Indpakning præferencer kan også skift med sprogets og formålet med teksten. En Mandarin nyhedsartikel og et fransk digt behøver ikke nødvendigvis at blive pakket ind på samme måde.
Der er et ret antal CSS-egenskaber (og HTML-elementer!), Der kan kontrol indpakning og breakpoints og også Definer hvordan mellemrum og linjeskift behandles inden indpakning.
Soft wrap muligheder og bløde wrap pauser
Browsere bestemmer hvor man skal pakke en overfyldt tekst afhængigt af ordgrænser, bindestreger, stavelser, tegnsætninger, mellemrum og mere. Disse steder er alle kaldt bløde wrap muligheder og når browseren bryder teksten på et sådant sted, bliver pause kaldet a blød wrap pause.
Den enkleste måde at tvinge en ekstra pause kan gøres ved at bruge den gode gamle
Hvidt rum
Hvis du er bekendt med hvidt rum CSS ejendom Jeg vedder dig, at du kom til at kende det på samme måde som mange andre; mens du søger efter en vej til forhindre indpakning af tekst. Det nowrap Værdi af hvidt rum gør netop det.
Men den hvidt rum Ejendommen handler om mere end bare indpakning. Først og fremmest, hvad er hvide rum? Det er en sæt plads tegn. Hvert rum i sættet varierer fra hinanden i længde, retning eller begge dele.
En typisk enkelt vandret rumtegn er det, vi tilføjer ved at trykke på mellemrumstasten. Tab-tasten tilføjer også a lignende rum, men en med større længde. Enter-tasten tilføjer a lodret rum at starte en ny linje, og i HTML tilføjer a enkelt ubrydeligt rum til websider. Ligesom dette er der mange typer rum, der udgør “hvidt rum”.
Som jeg nævnte i begyndelsen, browsere sammenbrud flere mellemrum (både vandret og lodret) i kilden til et enkelt rum. De også Overvej disse rumtegn til indpakningsmuligheder (steder hvor en tekst kan indpakkes), når indpakning er nødvendig.
Og det er netop disse browser handlinger, som vi kan kontrollere med hvidt rum. Bemærk at hvidt rum Ejendommen påvirker ikke alle former for plads, bare de hyppigste f.eks. det almindelige vandrette enkeltrum, faneplacering og linjefeeds.
Nedenfor kan du se et skærmbillede af en eksempeltekst, der er indpakket af browseren for at passe ind i dens container. Overløbet sker nederst i beholderen, og den overfyldte tekst er farvet anderledes. Du vil bemærke sammenbrud af de sammenhængende rum i koden.
EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej.
.textContainer width: 500px; højde: 320px;
Efter ansøgning hvid-rum: nowrap; Reglen ændrer indpakningen af teksten på følgende måde:
.textContainer / * ... * / white-space: nowrap;
Det præ Værdi af hvidt rum bevarer alle hvide rum og forhindrer indpakning af teksten:
.textContainer / * ... * / white-space: pre;
Det pre-wrap Værdi af hvidt rum bevarer alle hvide rum og ombryder teksten:
.textContainer / * ... * / white-space: pre-wrap;
Endelig præ-line Værdi af hvidt rum bevarer de vertikale hvide rum såsom nye linjer og ombryder teksten:
.textContainer / * ... * / white-space: pre-line;
Ordbrud
En anden vigtig CSS-egenskab, du bør vide for at kontrollere tekstwrap er ord-pause. Du kan se i alle ovenstående skærmbilleder som browseren indpakket teksten før ordet “Hej” på højre side, ud over hvilken tekst oversvømmet. Browseren brød ikke ordet.
Men hvis du skal tillade breve af breve i et ord så teksten ville se selv på højre side, skal du bruge break-all værdi for ord-pause ejendom:
.textContainer / * ... * / word-break: break-all;
Det ord-pause ejendommen har også en tredje værdi break-all og normal (der tilhører standard liniebrud). Det holde-all værdi tillader ikke brud på ord.
Du kan muligvis ikke se effekten af holde-all på engelsk. Men på sprog, hvor bogstaver i et ord er meningsfulde enheder på egen hånd, browseren kan bryde ordene ved indpakning, og dette kan forhindres ved brug af holde-all.
F.eks bogstaver i koreanske ord, oprindeligt brudt til indpakning, holdes sammen når hvid-rum: hold-all; regel er angivet.
EN¬Â ?? ¸ENªEN³Â ?? à «Â¥EN¼ A-A-Â¥A-a ?? â ?? à  ?? ?????????¬Â ??  ??  ?? ìEN½Â ?? en «â ?? â ?? ë ¡EN?? A-a ?? â ?? ì ?? Â-ì ?? â ?? ì ?? ¤. EN¬Â  ?? 10Ã- ??  ?? EN¬Â ??  ??  ?? ìEN½Â ?? à «Â ?? â ?? ENªENµA-A¬Â ?? A-a ?? â ?? ì ?? â ?? ê °  ?? 1997à  ...  ?? 3A¬Â ?? â ?? 10A¬Â ?? ¼à «Â¶Â    ° 12ì ?? ¼ENªEN¹Â ?? ìEN§EN?? à  ??  ... ì ?? ¼EN¬Â ?? â ?? à «Â§Â ?? ì ?? ¸EN¬EN¦Â ?? ìÂ- ?? ì ?? â ?? EN¬Â-´à «Â¦EN½Ã «Â ?? â ?? ë  ?? ¤. EN¬EN§Â ?? êEN¸EN?? à «Â ??  ± ë ¡ ?? Ã- ?? â ?? ì ?? Â-ì ?? â ?? ì ?? ¤. EN¬Â ?? ´ A-a ?? â ?? ì ?? â ?? ìÂ- ?? ì ?? â ?? à «Â ?? â ?? EN¬Â- ... êEN³EN?? EN¬Â ??  °  ?? ì ?? â ?? EN¬Â    ¬EN¸ENªÂ °  ?? à «Â ?? ¤EN¬Â ?? ´ A-A ?? ¨ENªÂ »Â ?? à «ÂªEN¨EN¬Â-¬ à «Â ?? ¤EN¬Â ?? â ?? êEN³EN¼ ENªÂ °  ?? ì ?? â ?? à «Â¶Â ?? ì ?? ¼à «Â¥EN¼ à «Â ?? ¤à «Â £ ¹à «Â ?? â ?? ë  ?? ¤.
.textContainer / * ... * / word-break: keep-all;
Denne egenskab kan understøtte en anden værdi, der hedder break-ord i fremtiden. Du kan se hvordan break-ord arbejder senere i “Overflow wrap” afsnit af denne artikel.
Ordbrudsmuligheder
Udviklere kan også tilføj wrap muligheder inden for ord, bruger
EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hello â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej. EN¢Â ?? â ?? Hej.
.textContainer / * ... * / white-space: pre-wrap;
Uden
bindestreger
Det bindestreger CSS ejendom er En anden måde at styre pauser mellem bogstaver i et ord. Vi har en separat artikel om CSS-orddeling, hvis du er interesseret. Kort sagt giver ejendommen dig mulighed for skabe indpakningsmuligheder ved hjælp af bindestreg.
dens auto værdien beder browseren til Automatisk bindestreg og knæk ord, hvis det er nødvendigt mens indpakning. Det brugervejledning værdi tvinger browsere til Ombryd (om nødvendigt) ved sammenhængende muligheder, der tilføjes af os, som bindestregkarakteren (‐) eller (blødt bindestreg). Hvis ingen blev givet som værdi der ville være ingen indpakning udført nær bindestreger.
blåhus blåhus blåhus blåhus blåhus blåhus blåhus blåhus blåhus blåhus blåhus blåhus
.textContainer / * ... * / -webkit-bindestreger: auto; -ms-bindestreger: auto; bindestreger: auto;
Overflow wrap
Det overflow-wrap CSS-egenskab kontrollerer, om a browser kan bryde ord (eller bevarede rum, støtte, som kan ske i den nærmeste fremtid) på overløb. Når break-ord værdi er angivet for overflow-wrap, ordet vil blive brudt i tilfælde af Der findes ingen andre bløde wrap muligheder i linjen.
Noter det overflow-wrap er også kendt som tekstombrydning (de er aliaser).
bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse
.textContainer / * ... * / overflow-wrap: break-word;
Med intet mellemrum mellem bogstaverne i HTML-koden ovenfor (dvs. ingen indpakningsmuligheder), blev teksten først pakket ind og blev bevaret som et enkelt ord.
Men da tilladelsen blev givet til at pakke teksten ved at bryde ord (dvs. break-ord værdi blev givet til overflow-wrap), det Indpakning skete ved at bryde hele strengen hvor det var nødvendigt.
