Slik endrer du standard tekstinnpakning med HTML og CSS

I motsetning til papir kan websider nesten uendelig strekker seg sidelengs. Så mye som imponerende det er, det er ikke noe vi virkelig trenger mens du leser. Nettlesere pakker inn tekst, avhengig av bredde på tekstbeholderen og bredden på skjermen slik at vi kan se all teksten uten å måtte rulle sidelengs mye (bare nedover).

innpakning er noe nettlesere vurderer mange faktorer, for eksempel språk i teksten eller plassering av tegnsetting og mellomrom-de Ikke trykk bare ned Hva passer ikke i boksen som er definert for tekstinnholdet.

Annet enn innpakning, nettlesere også ta vare på mellomrommene; De fusjonerer flere sammenhengende mellomrom i kildekoden til ett enkelt mellomrom på den gjengitte siden, og de registrerer også tvunget linjeskift før de begynner å jobbe med innpakningen.

Når skal du endre standard tekstinnpakning

Det er alt bra, og mye verdsatt. Men vi kan lett ende opp under omstendigheter der standard nettleseradferd ikke er det vi leter etter. Det kan være en overskrift som bør ikke pakkes inn eller et ord i et avsnitt som bedre bli ødelagt enn å gå ned en linje, forlater et merkelig tomt rom på slutten av linjen.

Det kan også skje at vi bare er desperat trenger de mellomrom som er bevart i vår tekst, men nettleseren fortsetter å kombinere dem med en, noe som tvinger oss til å legge til flere i kildekoden.

Innpakningspreferanser kan også endre med språk og formål med teksten. En Mandarin nyhetsartikkel og et fransk dikt trenger ikke nødvendigvis å bli pakket inn på samme måte.

Det er et rettferdig antall CSS-egenskaper (og HTML-elementer!) Som kan kontroller innpakning og bruddpunkter og også Definer hvordan mellomrom og linjeskift behandles før innpakning.

Myke wrap muligheter og myk bryting bryter

Nettlesere bestemmer hvor å pakke inn en overfylt tekst avhengig av ordgrenser, bindestreker, stavelser, tegnsetting, mellomrom og mer. Disse stedene er alle kalt myke wrap muligheter og når nettleseren bryter teksten på et slikt sted, blir pause kalt a myk wrap pause.

Den enkleste måten å tvinge en ekstra pause kan gjøres ved å bruke den gode gamle
element.

mellomrom

Hvis du er kjent med white-space CSS eiendom Jeg vedder at du kom til å først kjenne det på samme måte som mange andre; mens du søker etter en måte å hindre innpakning av tekst. De NOWRAP verdien av white-space gjør akkurat det.

Imidlertid white-space Eiendommen handler om mer enn bare innpakning. Først av alt, hva er hvite rom? Det er en sett med mellomromstegn. Hver plass i settet varierer fra hverandre i lengde, retning eller begge deler.

En typisk Enkelt horisontalt mellomrom er det vi legger til ved å trykke på mellomromstasten. Tab-tasten legger også til a lignende plass, men en med større lengde. Enter-tasten legger til a vertikal plass å starte en ny linje, og i HTML legger til en enkelt ubrytelig plass til nettsider. Slik er det mange typer mellomrom som utgjør “mellomrom”.

Som jeg nevnte i begynnelsen, nettlesere kollaps flere mellomrom (både horisontal og vertikal) i kilden i et enkelt rom. De også vurdere disse romtegnene for innpakningsmuligheter (steder der en tekst kan pakkes inn) når innpakning er nødvendig.

Og det er nettopp disse nettleserhandlingene som vi kan kontrollere med white-space. Legg merke til at white-space Eiendommen påvirker ikke all slags plass, bare de hyppigste for eksempel vanlig vannrett plass, tabplass og linjestrømmer.

Nedenfor kan du se et skjermbilde av en eksempeltekst som er pakket inn av nettleseren for å passe inn i beholderen. Overløpet skjer på bunnen av beholderen og den overfylte teksten er farget annerledes. Du vil legge merke til sammenbrudd av de påfølgende rom i koden.

 
 EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hei â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. 

 .textContainer width: 500px; høyde: 320px;  

Etter påføring white-space: nowrap; regelen, endres innpakningen av teksten på følgende måte:

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

De pre verdien av white-space bevarer alle hvite rom og hindrer innpakning av teksten:

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

De pre-wrap verdien av white-space bevarer alle hvite rom og bryter inn teksten:

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

Til slutt, pre-linje verdien av white-space bevarer de vertikale hvite rom for eksempel nye linjer og bryter inn teksten:

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

Ordbrudd

En annen viktig CSS-egenskap du bør vite for å kontrollere tekstbryteren er word-break. Du kan se i alle de ovennevnte skjermbildene som nettleseren pakket inn teksten før ordet “Hallo” på høyre side, utover hvilken tekst overflyttet. Nettleseren brøt ikke ordet.

Men hvis du må Tillat brevbrudd i et ord slik at teksten vil se selv på høyre side må du bruke break-all verdi for word-break eiendom:

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

De word-break Eiendommen har også en tredje verdi break-all og normal (tilhører standard linjeskift). De behold alt verdi tillater ikke ordbrudd.

Du kan kanskje ikke se effekten av behold alt på engelsk. Men på språk der bokstaver i et ord er meningsfulle enheter på egen hånd, nettleseren kan ødelegge ordene når det pakkes inn, og dette kan forhindres ved bruk av behold alt.

For eksempel, bokstaver i koreanske ord, opprinnelig ødelagt for innpakning, holdes sammen når hvit-rom: hold-all; regelen er spesifisert.

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

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

Denne egenskapen kan støtte en annen verdi som kalles break-ordet i fremtiden. Du vil se hvordan break-ordet fungerer senere, i “Overflow wrap” delen av denne artikkelen.

Ordbruddsmuligheter

Utviklere kan også legg til wrap muligheter inne ord, bruker HTML-element. Hvis en nettleser trenger å pakke inn en tekststreng, vil den vurdere stedet der er til stede for en innpakningsmulighet.

 
 EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hello â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. EN¢Â ??  ?? Hallo. 
 

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

Uten , hele “Hallo” ordet ville blitt gjort i en ny linje. Ved å legge til til HTML-koden, informerte vi nettleseren det Det er greit å slå ordet på det tidspunktet for innpakning, i tilfelle det er nødvendig.

bindestrek

De bindestrek CSS eiendom er En annen måte å styre pauser mellom bokstaver i et ord. Vi har en egen artikkel om CSS-bindestrek hvis du er interessert. Kort sagt, kan eiendommen du Lag innpakningsmuligheter gjennom bindestrek.

Det er auto verdien ber om nettleseren til automatisk ordne og knekke ord når det er nødvendig mens innpakning. De Håndbok verdi tvinger nettlesere til vikle (om nødvendig) ved sammenhengende muligheter som er lagt til av oss, som bindestrekkarakteren (‐) eller ­ (myk bindestrek). Hvis ingen ble gitt som verdi det ville være ingen innpakning gjort nær bindestreker.

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

Overflow wrap

De flow-wrap CSS-egenskapen kontrollerer om a nettleseren kan bryte ord (eller bevarede rom, støtte for som kan skje i nær fremtid) på overløp. Når break-ordet verdien er gitt for flow-wrap, ordet vil bli ødelagt i tilfelle ingen andre muligheter for myk opplasting er funnet i linjen.

Noter det flow-wrap er også kjent som word-wrap (de er aliaser).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

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

Uten mellomrom mellom bokstavene i HTML-koden ovenfor (dvs. ingen innpakningsmuligheter), ble teksten ikke pakket inn først og ble bevart som et enkelt ord.

Men da tillatelsen ble gitt til å pakke inn teksten ved å bryte ord (dvs. break-ordet verdien ble gitt til flow-wrap), den innpakning skjedde ved å bryte hele strengen hvor det var nødvendig.