Hogyan lehet módosítani az alapértelmezett szövegcsomagolást HTML és CSS használatával

Ellentétben a papírral, a weboldalak is szinte végtelenül oldalra nyúlik. Akárcsak a lenyűgöző, ez nem olyasmi, amire valóban szükségünk van olvasás közben. A böngészők a szövegtől függően becsomagolják a szövegtartály szélessége és a a képernyő szélessége úgy, hogy az összes szöveget anélkül látjuk, hogy oldalirányban kellett lapozni (csak lefelé).

Csomagolás a böngészők számos tényezőt figyelembe vesznek, például a szöveg nyelvét vagy az írásjelek és szóközök elhelyezését ne csak nyomja le ami nem illeszkedik a szöveges tartalomhoz megadott mezőbe.

A csomagoláson kívül böngészők is vigyázzon a helyekre; több egymást követő szóközt egyesítenek a forráskódban a renderelt oldalon lévő egyetlen helyre, és a kényszerített vonali szüneteket is regisztrálják a csomagolás előtt.

Mikor változtassa meg az alapértelmezett szöveges csomagolást

Ez minden nagyszerű, és nagyra értékelik. De könnyen eljuthatunk olyan körülmények között, amikor az alapértelmezett böngésző viselkedés nem az, amit keresünk. Ez lehet egy főcím nem kell becsomagolni vagy egy szó egy bekezdésben jobb, ha megtört, mint leereszkedni, páratlan megjelenésű üres hely marad a sor végén.

Előfordulhat, hogy csak kétségbeesetten szükségünk van a szövegben megőrzött terekre, ugyanakkor a böngésző egybeolvasztja őket, és többször is kényszeríti őket a forráskódban.

A csomagolási preferenciák is változtatni a szöveg nyelvével és céljával. A Mandarin híreket és a francia verset nem feltétlenül kell ugyanolyan módon csomagolni.

Számos CSS-tulajdonság (és HTML-elem!) Létezik szabályozza a csomagolást és a töréspontokat és még határozza meg, hogyan dolgozzák fel a terek és a vonalszakadásokat a csomagolás előtt.

Lágy csomagolási lehetőségek és lágy csomagolási szünetek

A böngészők eldönthetik, hogy hová kell csomagolni a túlterhelt szöveget a szóhatároktól, kötőjelektől, szótagoktól, központozásoktól, szóközöktől és többtől függően. Ezeket a helyeket hívják puha csomagolási lehetőségek és ha a böngésző megszakítja a szöveget egy ilyen helyen, akkor a szünetet a puha tekercs szünet.

A legegyszerűbb út kényszeríteni egy extra szünetet a jó öreg használatával
elem.

Fehér űr

Ha ismeri a fehér űr A CSS tulajdonság, amit fogadok, először azonos módon ismeri, mint sokan mások; miközben keres egy utat megakadályozzák a szöveg csomagolását. A nowrap értéke fehér űr pontosan ezt teszi.

Azonban a fehér űr az ingatlan több mint egy csomagolás. Először is, mi a tér? Ez egy hely karakterek halmaza. Minden készlet a készletben különbözik egymástól hosszban, irányban vagy mindkettőben.

Egy tipikus egyetlen vízszintes tér karakter amit a szóköz billentyű megnyomásával adunk hozzá. A Tab gomb megnyomásával a hasonló hely, de nagyobb hosszúságú. Az Enter gomb a függőleges tér új sor elindításához, és a HTML-ben a egyetlen törhetetlen tér weboldalakra. Ehhez hasonlóan rengeteg teret alkotnak “fehér űr”.

Ahogy az elején említettem, a böngészők összecsukja a több teret (mind vízszintes, mind függőleges) egy forrásba. Ők is fontolja meg ezeket a hely karaktereket a csomagolási lehetőségekhez (ahol a szöveget be lehet csomagolni), amikor a csomagolásra szükség van.

És pontosan ezek a böngésző műveletek irányíthatók fehér űr. Ne feledje, hogy a fehér űr a tulajdonságok nem érintik a különféle helyeket, csak a leggyakoribbak például a rendszeres vízszintes egyterület, a fültér és a soradatok.

Az alábbiakban egy minta szövegét láthatjuk a böngészőbe csomagolva, hogy illeszkedjen a tartályába. A túlcsordulás a tartály alján történik, és a túlterhelt szöveg másképp lesz színezve. Észreveszed az egymást követő terek összeomlása a kódban.

 
 â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Hello egy¢Â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. 

 .textContainer szélesség: 500px; magasság: 320px;  

Alkalmazás után fehér tér: mostcsak; szabály, a szöveg csomagolása a következőképpen változik:

 .textContainer / *… * / fehér-tér: most;  

A elő értéke fehér űr megőrzi az összes helyet és megakadályozza a szöveg csomagolását:

 .textContainer / *… * / fehér-tér: elő;  

A pre-wrap értéke fehér űr megőrzi az összes helyet és becsomagolja a szöveget:

 .textContainer / *… * / fehér-tér: előcsomagolás;  

Végül a pre-line értéke fehér űr megőrzi a függőleges helyeket például új vonalak és becsomagolja a szöveget:

 .textContainer / *… * / fehér-tér: elővonal;  

Szó szünetek

Egy másik fontos CSS tulajdonság, amit tudnia kell a szöveges csomagolás vezérléséhez szó-break. A fenti képernyőkön látható a böngésző a szöveget a szó elé csomagolták “Szia” a jobb oldalon, amelyen túl a szöveg túlcsordult. A böngésző nem törte meg a szót.

Ha azonban kell lehetővé teszi a betűk törését egy szóban úgy, hogy a szöveg még a jobb oldalon is megjelenhessen, a használatához break-összes értéke a szó-break ingatlan:

 .textContainer / *… * / word-break: mindent megtör;  

A szó-break az ingatlan harmadik értékkel rendelkezik break-összes és Normál (az alapértelmezett töréshez tartozik). A megtartani mindet érték nem teszi lehetővé a szavak törését.

Lehet, hogy nem látja a hatását megtartani mindet angolul. De azokban a nyelveken, ahol a betűk egy szóban vannak értelmes egységek, a böngésző megszakíthatja a szavakat a csomagolás során, és ez megakadályozható megtartani mindet.

Például a betűk koreai szavakkal, először törött a csomagoláshoz, együtt tartják amikor az fehér-tér: tartsa mindent; szabályt.

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

 .textContainer / *… * / word-break: mindent megtart;  

Ez a tulajdonság más értéket is támogathat break-szót a jövőben. Látni fogja, hogyan break-szót később működik, a “Túlcsordulás” fejezetben.

Szómegszakítási lehetőségek

A fejlesztők is add a szavakba csomagolási lehetőségeket, használni a HTML elem. Ha egy böngészőnek szöveges karakterláncot kell csomagolnia, akkor azt a helyet fogja figyelembe venni, ahol jelen van egy csomagolási lehetőségnél.

 
 â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Hello â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. â ??  ?? Szia. 
 

 .textContainer / *… * / fehér-tér: előcsomagolás;  

Nélkül , az egész “Szia” egy új sorban lett volna szó. Hozzáadásával a HTML-kódhoz tájékoztattuk a böngészőt rendben van, ha megtörjük a szót a csomagoláskor, amennyiben szükséges.

A kötőjel

A kötőjelet A CSS tulajdonság másik módja a betűk közötti szünetek vezérlésének egy szóban. Ha érdekel, külön cikkünk van a CSS elválasztásról. Röviden, a tulajdonság lehetővé teszi csomagolási lehetőségeket hozhat létre az elválasztással.

a kocsi Az érték kéri a böngészőt automatikusan szétválaszthatja és megszakítja a szavakat, ha szükséges csomagolás közben. A kézikönyv érték kényszeríti a böngészőket csomagolás (ha szükséges) az általunk hozzáadott elválasztási lehetőségekhez, például a kötőjel karakter (‐) vagy ­ (puha kötőjel). Ha egyik sem értéket kapott nincs kötés az kötőjelek közelében.

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

 .textContainer / *… * / -webkit-kötőjelek: auto; -ms-kötőjelek: auto; kötőjelek: auto;  

Túlcsordulás

A túlfolyó-wrap A CSS tulajdonság ellenőrzi, ha a a böngésző megszakíthatja a szavakat (vagy megőrzött terek, amelyek támogatása a közeljövőben történhet) túlcsorduláskor. Amikor az break-szót értéke megadva túlfolyó-wrap, a szó meg fog törni abban az esetben nincs más puha csomagolási lehetőség a sorban.

Vegye figyelembe, hogy túlfolyó-wrap más néven sortörés (álnevek).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / túlcsordulás: break-word;  

Ha a fenti HTML-kód betűi között nincs szóköz (vagyis nincs csomagolási lehetőség), a szöveg nem volt először csomagolva és egyetlen szóban tartották.

Azonban, amikor engedélyt kapott a szöveg szavak törlésével (azaz a break-szót értéket kapott túlfolyó-wrap), a a csomagolás az egész karakterlánc törésével történt ahol csak szükséges volt.