Kuidas muuta vaikimisi teksti pakendamist HTML ja CSS-iga

Erinevalt paberist saab veebilehti peaaegu lõpmatult külgsuunas. Nii palju kui muljetavaldav, see pole midagi, mida me lugemise ajal tegelikult vajame. Brauserid pakuvad teksti sõltuvalt teksti mahuti laius ja ekraani laius nii, et näeksime kogu teksti ilma, et oleks vaja külgsuunas kerida (ainult allapoole).

Pakendamine on midagi, mida brauserid arvestavad mitmete teguritega, nagu teksti keel või kirjavahemärkide ja tühikute paigutamine ärge lihtsalt suruge alla mis ei sobi teksti sisu jaoks määratud kasti.

Muud kui pakendamine, ka brauserid hoolitsege ruumide eest; nad ühendavad lähtekoodi mitu järjestikust tühikut üheks tühikuks suletud lehel ja nad registreerivad ka sunniviisilised vaheajad enne pakkimisega alustamist.

Millal muuta teksti tekstimärkimist

See on kõik suur ja väga teretulnud. Kuid me saame kergesti lõppeda olukordades, kus vaikimisi kasutatav brauseri käitumine ei ole see, mida me otsime. See võib olla pealkiri ei tohiks pakendada või mõnes lõigus sõna parem on katki kui rida, jättes paari lõpus tühja ruumi.

Samuti võib juhtuda, et me lihtsalt meeleheitlikult vajavad need ruumid meie tekstis säilinud, aga brauser ühendab neid ühte, sundides meid lisama mitu lähtekoodi.

Pakkimise eelistused võivad samuti olla muuta teksti keelt ja eesmärki. Mandariini uudiseid ja prantsuse luulet ei pea tingimata samamoodi pakkima.

On olemas palju CSS-omadusi (ja HTML-elemente!), Mida saab kontrollida pakendit ja murdepunkte ja ka määratlema, kuidas enne pakendamist ruume ja vaheaegu töödeldakse.

Pehmed mähkimisvõimalused ja pehme mähis purunevad

Brauserid otsustavad, kuhu ülevoolav tekst pakendada sõltuvalt sõna piiridest, sidekriipsudest, silbidest, kirjavahemärkidest, tühikutest ja muudest. Neid kohti kutsutakse kõik pehmed mähkimisvõimalused ja kui brauser rikub teksti ühes sellises kohas, nimetatakse vaheaega a pehme murru murdmine.

Lihtsaim viis sundida täiendavat pausi seda saab teha hea vana kasutades
element.

Tühik

Kui olete tuttav valge ruum CSS-i omadus, mille ma vean kihla, et teadsite seda sama moel nagu paljud teised; otsides teed takistada teksti pakendamist. The nohu väärtus valge ruum teeb seda täpselt.

Kuid valge ruum vara on rohkem kui lihtsalt pakkimine. Esiteks, mis on tühik? See on ruumi tähemärki. Iga komplekti ruum varieerub üksteisest pikkus, suund või mõlemad.

Tüüpiline üks horisontaalne ruum see, mida me lisame, vajutades tühikuklahvi. Kaardi klahv lisab ka a samasugune ruum, kuid suurem pikkusega. Sisestusklahv lisab a vertikaalne ruum uue rea käivitamiseks ja HTML-is lisab a üks purunematu ruum veebilehtedele. Sellega on palju ruume, mis moodustavad “tühik”.

Nagu alguses mainisin, on brauserid summutada mitu tühikut (nii horisontaalne kui ka vertikaalne) ühes ruumis. Nad ka kaaluma neid ruumi tähemärke pakendamisvõimaluste jaoks (kohad, kus teksti saab pakendada), kui pakend on vajalik.

Ja just neid brauseri toiminguid saame kontrollida valge ruum. Pange tähele, et valge ruum vara ei mõjuta igasugust ruumi, just kõige sagedasemad nagu tavaline horisontaalne üheruum, vahekaart ja reavahed.

Allpool näete ekraanipildi näidistekstist brauserisse pakitud, et see mahutitesse mahutada. Ülevool toimub konteineri allosas ja ületäitunud tekst värvitakse erinevalt. Sa märkad järjestikuste ruumide kokkuvarisemine koodis.

 
 â� Tere. â� Tere. â� Tere â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. 

 .textContainer laius: 500 px; kõrgus: 320 px;  

Pärast kandmist valge-ruum: nihutamine; reeglina muutub teksti mähkimine järgmiselt:

 .textContainer / *… * / valge-ruum: nowrap;  

The eel väärtus valge ruum säilitab kõik tühikud ja takistab teksti pakendamist:

 .textContainer / *… * / valge-ruum: pre;  

The eelpakendamine väärtus valge ruum säilitab kõik tühikud ja mähib teksti:

 .textContainer / *… * / valge-ruum: eelpakendamine;  

Lõpuks eelliin väärtus valge ruum säilitab vertikaalsed ruumid nagu uued read ja mähib teksti:

 .textContainer / *… * / valge-tühik: eelliin;  

Sõna puruneb

Teine oluline CSS-omadus, mida peaksite teadma teksti murdmise juhtimiseks sõna-vaheaega. Kõigis ülaltoodud ekraanipiltides näete brauserit pakendas teksti sõna ees “Tere” parempoolsel küljel, mille järel teksti üle. Brauser ei riku sõna.

Kui aga vaja teha võimaldada sõnade murdmist nii, et tekst näeks välja isegi paremal, peate kasutama kõik väärtuse sõna-vaheaega vara:

 .textContainer / *… * / sõna-murda: kõik;  

The sõna-vaheaega vara on lisaks kolmandale väärtusele kõik ja normaalne (kuulub vaikimisi reale). The hoidke kõik väärtus ei luba sõnade murdmist.

Te ei pruugi näha selle mõju hoidke kõik inglise keeles. Kuid keeltes, kus tähed on sõnad tähendusrikkad üksused, brauser võib murdmise ajal murda sõnu ja seda saab ära kasutada hoidke kõik.

Näiteks tähed Korea sõnades, algselt katki pakkimiseks, hoitakse koos kui valge-ruum: hoidke kõik; reegel on määratud.

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

 .textContainer / *… * / sõna-vaheaeg: hoidke kõik;  

See omadus võib toetada teist nimega väärtust sõna-sõna tulevikus. Näete, kuidas sõna-sõna toimib hiljem “Ülevoolu mähis” käesoleva artikli osa.

Sõna murdmise võimalused

Arendajad saavad ka lisage sõnade sees murdmisvõimalused, kasutades HTML-element. Kui brauser peab tekstistringi ümbritsema, kaalub see koha, kus on olemas pakendamisvõimaluse jaoks.

 
 â� Tere. â� Tere. â� Hello â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. â� Tere. 
 

 .textContainer / *… * / valge-ruum: eelpakendamine;  

Ilma , tervik “Tere” sõna oleks antud uues reas. Lisades HTML-koodi juurde teavitasime brauserit see on okei murda sõna selles punktis, kui see on vajalik.

Sidekriipsud

The sidekriipsud CSS-i omadus on teine ​​võimalus tähtede vaheliste vaheaegade juhtimiseks Ühesõnaga. Kui olete huvitatud, on meil CSS-i sidekriipsuga eraldi artikkel. Lühidalt öeldes võimaldab see kinnisvara luua pakkimisvõimalusi sidekriipsuga.

See on automaatne väärtus küsib brauserit vajaduse korral sõnad automaatselt siduda ja murda pakkimise ajal. The käsiraamat väärtus sunnib brausereid mähkige (vajadusel) meie poolt lisatud ühildamisvõimalustele, nagu sidekriips (‐) või ­ (pehme sidekriips). Kui mitte ükski oleks antud väärtus sidekriipsude läheduses ei ole pakendit tehtud.

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

 .textContainer / *… * / -webkit-sidekriipsud: auto; -ms-sidekriipsud: auto; sidekriipsud: auto;  

Ülevoolu mähis

The ülevoolav mähis CSS-i vara kontrollib, kui a brauser võib murda sõnu (või säilitatud ruumid, mille toetamine võib toimuda lähitulevikus) ülevoolul. Kui sõna-sõna väärtus on antud ülevoolav mähis, sõna katkeb juhul kui muid pehmeid mähkimisvõimalusi ei leita reas.

Pange tähele, et ülevoolav mähis on tuntud ka kui sõnamähis (need on varjunimed).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / ülevoolu-murdmine: break-word;  

Ülaltoodud HTML-koodi tähtede vahele ei ole ruumi (st pakendamisvõimalusi ei ole), teksti ei pakitud esimesena ja säilitati ühe sõnana.

Siiski, kui anti luba teksti murdmiseks sõnade murdmisega (st sõna-sõna väärtus anti ülevoolav mähis), pakkimine toimus kogu stringi murdmisega kus see oli vajalik.