Hoe Default Text Wrapping te veranderen met HTML en CSS

In tegenstelling tot papier kunnen webpagina's dat wel strek bijna oneindig zijdelings uit. Hoe indrukwekkend dat ook is, het is niet iets dat we echt nodig hebben tijdens het lezen. Browsers wikkelen tekst in afhankelijk van de breedte van de tekstcontainer en de breedte van het scherm zodat we alle tekst kunnen zien zonder veel zijwaarts te scrollen (alleen naar beneden).

omhulsel is iets wat browsers doen, rekening houdend met vele factoren, zoals de taal van de tekst of de plaatsing van interpunctie en spaties-zij niet alleen naar beneden duwen wat niet past in het vak dat is gedefinieerd voor de tekstinhoud.

Anders dan wrappen, browsers ook zorg voor de ruimtes; ze voegen meerdere opeenvolgende spaties in de broncode samen in één enkele ruimte op de gegenereerde pagina en registreren ook geforceerde regeleinden voordat ze aan de verpakking beginnen te werken.

Wanneer de standaardtekstterugloop wijzigen

Dat is allemaal geweldig, en zeer op prijs gesteld. Maar we kunnen gemakkelijk eindigen in omstandigheden waarin het standaard browsergedrag niet is wat we zoeken. Het kan een kop zijn die moet niet worden ingepakt of een woord in een alinea dat beter gebroken zijn dan een lijn afdalen, een vreemde lege ruimte aan het einde van de regel achterlaten.

Het kan ook gebeuren dat we gewoon wanhopig zijn hebben die spaties nodig die zijn bewaard in onze tekst, maar de browser blijft ze combineren tot één, waardoor we er meerdere moeten toevoegen in de broncode.

Voorkeuren voor verpakken kunnen ook veranderen met de taal en het doel van de tekst. Een nieuwsartikel in het Mandarijn en een Frans gedicht hoeven niet per se op precies dezelfde manier te worden verpakt.

Er zijn behoorlijk wat CSS-eigenschappen (en HTML-elementen!) Die dat kunnen controle over de verpakking en de breekpunten en ook definieer hoe spaties en regeleinden worden verwerkt vóór het inpakken.

Zachte wrap-mogelijkheden en zachte wrap-breaks

Browsers bepalen waar een overvolle tekst wordt ingepakt afhankelijk van woordgrenzen, koppeltekens, lettergrepen, interpuncties, spaties en meer. Deze plaatsen worden allemaal genoemd zachte wrap-mogelijkheden en wanneer de browser de tekst op een dergelijke plaats doorbreekt, wordt de onderbreking a genoemd zachte wrap break.

De eenvoudigste manier om een extra pauze afdwingen kan gedaan worden door het goede oude te gebruiken
element.

Witte ruimte

Als u bekend bent met de witte ruimte CSS-eigenschap Ik wed dat je het eerst op dezelfde manier hebt leren kennen als vele anderen; tijdens het zoeken naar een manier om het omwikkelen van tekst voorkomen. De nowrap waarde van witte ruimte doet precies dat.

echter, de witte ruimte vastgoed gaat over meer dan alleen verpakken. Allereerst, wat is witruimte? Het is een reeks ruimtetekens. Elke spatie in de set verschilt van elkaar in lengte, richting of beide.

Een typisch enkel horizontaal ruimteken is wat we toevoegen door op de spatiebalktoets te drukken. Tab-toets voegt ook een toe vergelijkbare ruimte maar een met grotere lengte. Enter-toets voegt een toe verticale ruimte om een ​​nieuwe regel te starten, en in HTML voegt een toe enkele onbreekbare ruimte naar webpagina's. Zo zijn er veel soorten ruimtes die vormen “witte ruimte”.

Zoals ik in het begin al zei, browsers vouw meerdere spaties in (zowel horizontaal als verticaal) in de bron in een enkele ruimte. Zij ook overweeg deze ruimtetekens voor het verpakken van kansen (plaatsen waar een tekst kan worden ingepakt) wanneer het inpakken nodig is.

En juist deze browseracties kunnen we beheren witte ruimte. Merk op dat de witte ruimte eigendom heeft geen invloed op alle soorten ruimte, alleen de meest voorkomende zoals de normale horizontale enkele spatie, tabruimte en lijnfeeds.

Hieronder ziet u een screenshot van een voorbeeldtekst die dat is ingepakt door de browser om in de container te passen. De overloop gebeurt aan de onderkant van de container en de overgelopen tekst is anders gekleurd. Je zult de instorting van de opeenvolgende ruimtes in de code.

 
 EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. 

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

Na het aanbrengen white-space: nowrap; regel verandert de tekstomloop op de volgende manier:

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

De pre waarde van witte ruimte behoudt alle spaties en voorkomt het omwikkelen van de tekst:

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

De pre-wrap waarde van witte ruimte behoudt alle spaties en wraps de tekst:

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

eindelijk, de pre-lijn waarde van witte ruimte behoudt de verticale spaties zoals nieuwe regels en wraps de tekst:

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

Word breekt

Een andere belangrijke CSS-eigenschap die u moet weten voor het beheren van tekstomloop is word-break. Je kunt in alle bovenstaande screenshots zien dat de browser wikkelde de tekst vóór het woord “Hallo” aan de rechterkant, waarachter tekst overlopen. De browser brak het woord niet.

Echter, als u moet laat het breken van letters in één woord toe zodat de tekst er zelfs aan de rechterkant uitziet, moet je de break-all waarde voor de word-break eigendom:

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

De word-break eigendom heeft bovendien een derde waarde break-all en normaal (behorend bij de standaard regelbreuk). De houd alles waarde staat het breken van woorden niet toe.

Mogelijk kunt u het effect hiervan niet zien houd alles in Engels. Maar in talen waar letters in een woord zijn betekenisvolle eenheden op zichzelf, de browser kan de woorden breken bij het omwikkelen, en dit kan worden voorkomen met houd alles.

Bijvoorbeeld, de letters in Koreaanse woorden, aanvankelijk gebroken voor verpakking, worden bij elkaar gehouden wanneer de white-space: keep-all; regel is opgegeven.

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

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

Deze eigenschap ondersteunt mogelijk een andere geroepen waarde break-woord in de toekomst. Je zult zien hoe break-woord werkt later, in de “Overloop wrap” sectie van dit artikel.

Woord breek mogelijkheden

Ontwikkelaars kunnen ook voeg wrap-mogelijkheden toe aan woorden, de ... gebruiken HTML-element. Als een browser een tekstreeks moet omwikkelen, zal deze de plek waarnemen is aanwezig voor een inpakmogelijkheid.

 
 EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hello â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. EEN¢Â ??  ?? Hallo. 
 

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

Zonder , het geheel “Hallo” woord zou in een nieuwe regel zijn weergegeven. Door toe te voegen naar de HTML-code, hebben we de browser geïnformeerd dat het is goed om op dat moment het woord te breken voor het inpakken, voor het geval het nodig is.

koppeltekens

De koppeltekens CSS-eigenschap is een andere manier om pauzes tussen letters te beheersen in een woord. We hebben een apart artikel over CSS-woordafbreking als je geïnteresseerd bent. Kortom, het pand stelt u in staat om maak inpakmogelijkheden door woordafbreking.

Haar auto waarde geeft de browser aan automatisch afbreken en woorden breken waar nodig tijdens het inpakken. De met de hand waarde dwingt browsers tot wrap (indien nodig) bij door ons toegevoegde woordafbreking, zoals het koppelteken (‐) of ­ (zacht koppelteken). Als geen werd gegeven als de waarde die er zou zijn geen inwikkeling gedaan in de buurt van koppeltekens.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

 .textContainer / * ... * / -webkit-hyphens: auto; -ms-koppeltekens: auto; koppeltekens: auto;  

Overloop wrap

De overflow-wrap CSS-eigenschap bepaalt of a browser kan woorden breken (of bewaarde ruimtes, ondersteuning waarvoor in de nabije toekomst zou kunnen gebeuren) op overloop. Wanneer de break-woord waarde wordt gegeven voor overflow-wrap, het woord zal worden verbroken in geval dat er zijn geen andere zachte wrap-mogelijkheden gevonden in de rij.

Let daar op overflow-wrap is ook bekend als word-wrap (ze zijn aliassen).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / * ... * / overflow-wrap: breekwoord;  

Zonder ruimte tussen de letters in de bovenstaande HTML-code (d.w.z. geen wrapping-mogelijkheden), werd de tekst in eerste instantie niet ingepakt en werd bewaard als een enkel woord.

Echter, toen de toestemming werd gegeven om de tekst om te slaan door woorden te breken (dat wil zeggen de break-woord waarde werd gegeven aan overflow-wrap), de inpakken gebeurde door het breken van de hele reeks waar het nodig was.