Miten muokata oletustekstin käärimistä HTML llä ja CSS llä

Toisin kuin paperi, verkkosivut voivat ulottuu lähes äärettömästi sivuttain. Niin paljon kuin vaikuttavaa, se ei ole jotain, jota todella tarvitsemme lukemisen aikana. Selaimet käärittävät tekstiä riippuen tekstikontin leveys ja näytön leveys jotta voimme nähdä kaiken tekstin ilman, että tarvitsemme vierittää sivusuunnassa (vain alaspäin).

kääreeseen on jotain selaimia, joissa otetaan huomioon monet tekijät, kuten tekstin kieli tai välimerkkien ja välilyöntien sijoittelu älä vain työnnä alas mikä ei sovi tekstisisältöön määritettyyn ruutuun.

Muut kuin kääriminen, selaimet myös hoitaa tilat; ne yhdistävät lähdekoodissa useita peräkkäisiä välilyöntejä yhdeksi tilaksi renderoidulle sivulle, ja ne myös rekisteröivät pakotetun rivinvaihdon ennen kuin ne alkavat työskennellä kääreellä.

Milloin tekstin oletuskääreitä muutetaan

Se on kaikki hienoa ja arvostettu. Mutta voimme helposti päätyä tilanteissa, joissa selaimen oletuskäyttäytyminen ei ole mitä etsimme. Se voi olla otsikko ei pitäisi kääriä tai sana kappaleessa parempi rikkoa kuin laskeutua, jättää parittoman tyhjän tilan rivin loppuun.

Saattaa myös tapahtua, että me vain epätoivoisesti tarvitsemme tekstissä säilytettyjä tiloja, selain kuitenkin yhdistää ne yhteen ja pakottaa meidät lisäämään useita lähdekoodissa.

Pakkausasetukset voivat myös olla muutetaan tekstin kielellä ja tarkoituksella. Mandarin-uutiskirjettä ja ranskalaista runoa ei välttämättä tarvitse pakata samaan tapaan.

On olemassa useita CSS-ominaisuuksia (ja HTML-elementtejä!), Jotka voivat hallita kääreitä ja katkaisupisteitä ja myös määrittele, miten tilat ja rivinvaiheet käsitellään ennen käärimistä.

Pehmeät käärimismahdollisuudet ja pehmeät käärintakatkot

Selaimet päättävät, mihin kääri ylivuodettu teksti riippuen sanojen rajoista, väliviivoista, tavuista, välimerkkeistä, välilyönteistä ja enemmän. Näitä paikkoja kutsutaan pehmeät pakkausmahdollisuudet ja kun selain ei riko tekstiä tällaisessa paikassa, tauko on nimeltään a pehmeä kääre.

Yksinkertaisin tapa pakottaa ylimääräinen tauko voidaan tehdä hyvällä vanhalla
elementti.

välilyönnillä

Jos olet perehtynyt white-space CSS-ominaisuus, jonka panostan, tulit ensin tuntemaan sen samalla tavalla kuin monet muutkin; kun etsit tietä estää tekstin kääriminen. NoWrap jonkin arvo white-space tekee juuri niin.

Kuitenkin white-space omaisuus on enemmän kuin vain kääriminen. Ensinnäkin, mikä on välilyönti? Se on a joukko välilyöntejä. Jokainen tila sarjassa vaihtelee toisistaan pituus, suunta tai molemmat.

Tyypillinen yksi vaakasuora tila lisätään painamalla välilyöntinäppäintä. Tab-näppäin lisää myös samanlainen tila, mutta isompi. Enter-näppäin lisää a pystysuora tila aloittaa uuden rivin, ja HTML: ssä lisätään a yksi särkymätön tila Web-sivuille. Tällöin on runsaasti erilaisia ​​tiloja “välilyönti”.

Kuten mainitsin alussa, selaimet romahtaa useita tiloja (sekä vaaka- että pystysuunnassa) lähteenä yhdeksi tilaksi. He myös harkitsemaan näitä avaruusmerkkejä käärimismahdollisuuksiin (paikkoja, joissa teksti voidaan kääriä), kun pakkaus on tarpeen.

Ja juuri näitä selaintoimintoja voimme hallita white-space. Huomaa, että white-space omaisuus ei vaikuta kaikenlaiseen tilaan, vain yleisimmät kuten tavallinen vaakasuora yksittäinen tila, välilehti ja rivin syötteet.

Alla näet kuvakaappauksen näytetekstistä selaimen käärittämänä, jotta se mahtuu sen säiliöön. Ylivuoto tapahtuu säiliön alaosassa ja ylivuotoinen teksti on värjätty eri tavalla. Huomaat, että peräkkäisten tilojen romahtaminen koodissa.

 
 â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. 

 .textContainer leveys: 500px; korkeus: 320px;  

Hakemuksen jälkeen valkoinen-avaruus: nyt; säännön mukaan tekstin kääriminen muuttuu seuraavasti:

 .textContainer / *… * / valkoinen-tila: nowrap;  

pre jonkin arvo white-space säilyttää kaikki välilyönnit ja estää tekstin käärimisen:

 .textContainer / *… * / valkoinen-tila: pre;  

pre-wrap jonkin arvo white-space säilyttää kaikki välilyönnit ja käärii tekstin:

 .textContainer / *… * / valkoinen-tila: esikääre;  

Lopuksi pre-line jonkin arvo white-space säilyttää pystysuuntaiset tilat kuten uudet linjat ja käärii tekstin:

 .textContainer / *… * / valkoinen-tila: pre-line;  

Sanan rikkoutuminen

Toinen tärkeä CSS-ominaisuus, jota sinun pitäisi tietää tekstin käärimisen ohjaamiseksi on sana-break. Näet kaikki yllä olevat kuvakaappaukset, joita selain näyttää kääri teksti ennen sanaa “Hei” oikealla puolella, jonka yli teksti on täynnä. Selain ei rikkonut sanaa.

Jos kuitenkin täytyy sallia kirjainten rikkominen sanassa jotta teksti näyttää edes oikealta puolelta, sinun täytyy käyttää break-all arvo sana-break omaisuus:

 .textContainer / *… * / sana-tauko: kaikki;  

sana-break omaisuudella on lisäksi kolmas arvo break-all ja normaali (kuuluu oletusrivinvaihtoon). pidä kaikki arvo ei salli sanojen rikkomista.

Et ehkä näe vaikutusta pidä kaikki englanniksi. Mutta kielillä, joissa sanat ovat merkityksellisiä yksiköitä, selain saattaa rikkoa sanat käärimisen aikana, ja tämä voidaan estää käyttämällä pidä kaikki.

Esimerkiksi kirjaimet korealaisilla sanoilla, aluksi rikki käärimistä varten, pidetään yhdessä kun valkoinen-tila: pidä kaikki; sääntö on määritetty.

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

 .textContainer / *… * / word-break: pidä kaikki;  

Tämä ominaisuus saattaa tukea toista arvoa, jota kutsutaan break-sana tulevaisuudessa. Näet miten break-sana toimii myöhemmin “Ylivuotopakkaus” tämän artikkelin.

Sanamurron mahdollisuudet

Kehittäjät voivat myös lisää käämitysmahdollisuudet sanojen sisällä, käyttämällä HTML-elementti. Jos selaimen on pakattava tekstirivi, se harkitsee kohtaa, jossa on läsnä käärimismahdollisuudelle.

 
 â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hello â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. â ??  ?? Hei. 
 

 .textContainer / *… * / valkoinen-tila: esikääre;  

Ilman , koko “Hei” sana olisi tehty uudella rivillä. Lisäämällä HTML-koodiin ilmoitimme selaimelle se on kunnossa rikkoa sana tässä vaiheessa käärimistä varten, jos se on tarpeen.

Tavuviivat

väliviivoja CSS-ominaisuus on toinen tapa hallita kirjainten välisiä taukoja sanassa. Meillä on erillinen artikkeli CSS-tavutuksesta, jos olet kiinnostunut. Lyhyesti sanottuna omaisuus sallii luoda käärintämahdollisuuksia tavutuksen kautta.

Sen auto arvo kehottaa selainta yhdistää automaattisesti ja murtaa sanat tarvittaessa käärimisen aikana. manuaalinen arvo pakottaa selaimet kääri (tarvittaessa) yhdyskäytävämahdollisuuksiin, joita me lisäämme, kuten tavuviiva (‐) tai ­ (pehmeä tavuviiva). Jos ei mitään annettiin arvona ei kääreitä suoritteiden lähellä.

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

 .textContainer / *… * / -webkit-hyphens: auto; -ms-hyphens: auto; tavuviivat: auto;  

Ylivuotopakkaus

ylivuoto-Wrap CSS-ominaisuus ohjaa, jos a selain voi rikkoa sanoja (tai säilytetyt tilat, joiden tuki voi tapahtua lähitulevaisuudessa) ylivuoto. Kun break-sana arvo on annettu ylivuoto-Wrap, sana rikkoutuu varalta muita pehmeitä kääreitä ei löydy linjassa.

Ota huomioon, että ylivuoto-Wrap tunnetaan myös nimellä rivitys (ne ovat aliaksia).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / ylivuotopakkaus: break-word;  

Kun tekstissä ei ole välilyönti edellä olevan HTML-koodin kirjaimien välillä (ts. Ilman käärintämahdollisuuksia), tekstiä ei kääritty ensin ja säilytettiin yhtenä sanana.

Kuitenkin, kun lupa annettiin tekstin käärimiseksi rikkomalla sanoja (eli break-sana arvo annettiin ylivuoto-Wrap), kääriminen tapahtui rikkomalla koko merkkijono missä se oli tarpeen.