Så här ändrar du standard textförpackning med HTML och CSS

Till skillnad från papper kan webbsidor sträcker sig nästan oändligt i sidled. Så mycket som imponerande det är det inte något vi verkligen behöver när du läser. Webbläsare sätter in text beroende på textbehållarens bredd och den skärmens bredd så att vi kan se all text utan att behöva rulla sidled mycket (endast nedåt).

Omslag är något som webbläsare överväger många faktorer, till exempel språkets språk eller placering av skiljetecken och mellanslag-de Tryck inte bara ner vad passar inte i rutan som definieras för textinnehållet.

Annat än omslag, webbläsare också ta hand om utrymmena; de sammanfogar flera på varandra följande utrymmen i källkoden i ett enda utrymme på den renderade sidan och de registrerar också tvångsavbrott innan de börjar arbeta med omslaget.

När ska du ändra standardtextförpackning

Det är allt bra, och mycket uppskattat. Men vi kan lätt hamna under omständigheter där standardwebbläsarens beteende inte är det vi söker. Det kan vara en rubrik som bör inte förpackas eller ett ord i ett stycke som bättre brutna än att gå ner i en linje, lämnar ett udda tomt utrymme i slutet av linjen.

Det kan också hända att vi bara är desperat behöver de utrymmen som bevaras i vår text, men webbläsaren fortsätter att kombinera dem till en, vilket tvingar oss att lägga till flera i källkoden.

Förpackningsinställningar kan också ändra med språk och syfte med texten. En nyhetsartikel från Mandarin och en fransk dikt behöver inte nödvändigtvis viklas på exakt samma sätt.

Det finns ett rättvist antal CSS-egenskaper (och HTML-element!) Som kan kontrollera omslaget och brytpunkterna och även definiera hur mellanslag och radbrytningar behandlas före omslaget.

Mjuka wrap möjligheter och mjukbrytning raster

Webbläsare bestämmer vart man ska sätta ihop en överflödig text beroende på ordgränser, bindestreck, stavelser, skiljetecken, mellanslag och mer. Dessa platser är alla kallade mjuka wrap möjligheter och när webbläsaren bryter mot texten på en sådan plats kallas pausen a mjuk wrap break.

Det enklaste sättet att tvinga en extra paus kan göras med hjälp av den goda gamla
element.

blank

Om du är bekant med white-space CSS-egenskapen Jag slår vad om att du kom för att först förstå det på samma sätt som många andra; medan du letar efter ett sätt att förhindra omslagning av text. De nowrap värdet av white-space gör exakt det.

Men white-space egendom handlar om mer än bara omslagning. Först av allt, vad är blankutrymme? Det är en uppsättning rymdtecken. Varje utrymme i uppsättningen varierar från varandra i längd, riktning eller båda.

En typisk enskilt horisontellt mellanslag är vad vi lägger till genom att trycka på mellanslagstangenten. Tab-tangent lägger också till a liknande utrymme men en med större längd. Enter-tangenten lägger till a vertikalt utrymme för att starta en ny linje, och i HTML läggs till en enda okrossbart utrymme till webbsidor. Liksom detta finns det många typer av utrymmen som utgör “blank”.

Som jag nämnde i början, webbläsare kollapsera flera mellanslag (både horisontella och vertikala) i källan till ett enda utrymme. De också Tänk på dessa mellanslag för inslagningsmöjligheter (platser där en text kan lindas) när inslagning behövs.

Och det är just dessa webbläsaråtgärder som vi kan kontrollera med white-space. Observera att white-space egendom påverkar inte alla slags utrymme, bara de vanligaste som det vanliga horisontella enkla rymden, flikutrymmet och radmatningarna.

Nedan kan du se en skärmdump av en provtext som är lindas av webbläsaren för att passa inuti behållaren. Överflödet händer längst ner i behållaren och den överflödda texten är färgad annorlunda. Du kommer att märka sammanfaller av de på varandra följande utrymmena i koden.

 
 EN¢Â ??  ?? Hej. EN¢Â ??  ?? Hej. EN¢Â ??  ?? Hej a¢Â ??  ?? 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öjd: 320px;  

Efter applicering white-space: nowrap; reglera ändras textförpackningen på följande sätt:

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

De pre värdet av white-space bevarar alla vitrum och förhindrar omslaget av texten:

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

De pre-wrap värdet av white-space bevarar alla vitrum och wraps texten:

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

Slutligen, den pre-line värdet av white-space bevarar de vertikala vita utrymmena som nya linjer och wraps texten:

 .textContainer / * ... * / white-space: pre-line;  

Ordbrytningar

En annan viktig CSS-egenskap du borde veta för att styra textomslag är word-break. Du kan se i alla ovanstående skärmdumpar som webbläsaren förpackade texten före ordet “Hej” på höger sida, bortom vilken text överflödig. Webbläsaren bröt inte ordet.

Men om du måste tillåta bristning av bokstäver i ett ord så att texten skulle se ut till höger måste du använda bryta-all värde för word-break fast egendom:

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

De word-break egenskapen har dessutom ett tredje värde bryta-all och vanligt (som hör till standardlinjen bryts). De behåll alla värde tillåter inte ordbrytning.

Du kanske inte kan se effekten av behåll alla på engelska. Men på språk där bokstäver i ett ord är meningsfulla enheter på egen hand, webbläsaren kan bryta orden vid inlämning, och detta kan förhindras att använda behåll alla.

Till exempel, bokstäver i koreanska ord, ursprungligen bruten för omslagning, hålls ihop när white-space: keep-all; regel anges.

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

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

Den här egenskapen kan stödja ett annat kallat värde break-ordet i framtiden. Du får se hur break-ordet fungerar senare, i “Overflow wrap” avsnittet av denna artikel.

Ordbrytningsmöjligheter

Utvecklare kan också lägg till wrap möjligheter inuti ord, använda HTML-element. Om en webbläsare behöver lägga in en textsträng kommer den att överväga platsen där är närvarande för en omslagsmöjlighet.

 
 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;  

Utan , hela “Hej” ordet skulle ha gjorts i en ny linje. Genom att lägga till till HTML-koden informerade vi webbläsaren det Det är okej att bryta ordet på den tiden för inslagning, om det är nödvändigt.

Bindestreck

De bindestreck CSS-egenskapen är Ett annat sätt att styra raster mellan bokstäver i ett ord. Vi har en separat artikel om CSS-koppling om du är intresserad. Kort sagt, gör fastigheten dig att skapa inslagningsmöjligheter genom bindning.

Dess bil värde frågar webbläsaren till automatiskt binda ord och bryta ord när det behövs medan omslaget. De manuell värdet tvingar webbläsare till Wrap (om det behövs) vid kopplingsmöjligheter som läggs till av oss, som bindestreckskaraktären (‐) eller ­ (mjukt bindestreck). Om ingen gavs som värde det skulle vara ingen omslag görs nära bindestreck.

 
 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-bindestreck: auto; -ms-bindestreck: auto; bindestreck: auto;  

Overflow wrap

De överströmnings-wrap CSS-egenskapskontrollen om a webbläsaren kan bryta ord (eller bevarade utrymmen, stöd för vilka det kan hända inom en snar framtid) på överflöd. När break-ordet värdet ges för överströmnings-wrap, ordet kommer att brytas om inga andra mjukomslag finns i linjen.

Anteckna det överströmnings-wrap är också känd som word-wrap (de är aliaser).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / * ... * / overflow-wrap: break-word;  

Med inget mellanslag mellan bokstäverna i HTML-koden ovan (det vill säga inga inpakningsmöjligheter), förstördes inte texten först och bevarades som ett enda ord.

Men när tillståndet gavs att sätta ihop texten genom att bryta ord (dvs break-ordet värdet gavs till överströmnings-wrap), the omslaget hände genom att bryta hela strängen varhelst det var nödvändigt.