Css kényszerített szavak tördelése. Hosszú szavak csomagolása CSS -sel

Az internet tartalomból, a tartalom szavakból áll, és a szavak nagyon -nagyon hosszúak lehetnek. És előbb -utóbb egy webmester szembesül a hosszú szavak elválasztásának problémájával. Ez a probléma különösen igaz a reszponzív tervezésre és a kis tartalomtömbökre. Tehát hogyan kezelje ezt a problémát?

Kötőjel

A hosszú szavak elválasztására az első megoldás a kötőjel.

Defisi (-webkit-kötőjelek: auto; -moz-kötőjelek: auto; -ms-kötőjelek: auto; kötőjelek: auto;)

Böngészőtámogatás: A CSS kötőjeleket szinte minden modern böngésző támogatja, kivéve a Chrome, az Opera és az Android. Ezenkívül nagyon gyakran kötőjelet illesztenek be olyan helyekre, amelyek nyelvtanilag hibásak.

Törj szót

A szótörés egy CSS -tulajdonság, amely meghatározza, hogy a szavakon belül sorokat kell -e törni.

Obriv-slova (-ms-word-break: break-all; word-break: all-all; word-break: break-word;)

Böngészőtámogatás: A Word break minden böngészőben támogatott, kivéve az Opera Mini és az Opera régebbi verzióit.

Túlfolyó burkolat

A következő megoldás az overflow-wrap használata.

Obertka-perepolneniya (word-wrap: break-word; overflow-wrap: break-word;)

Böngészőtámogatás: Szinte minden böngészőben támogatott. Megjegyzés: Bizonyos böngészőkben a „word-wrap” használatát kell előírni a „overflow-wrap” helyett.

Ellipszis

Egy másik lehetőség az ellipszis használata.

Mnogotochiye (túlcsordulás: rejtett; fehér szóköz: nowrap; szöveg-túlcsordulás: ellipszis;)

Böngészőtámogatás: Minden modern böngésző támogatja.

Ez egy működő módszer, de messze nem tökéletes.

Végső megoldás: A túlcsordulás és kötőjel csomagolás használata.

Finalnoye-resheniye (overflow-wrap: break-word; word-wrap: break-word; -webkit-kötőjelek: auto; -ms-kötőjelek: auto; -moz-kötőjelek: auto; kötőjelek: auto;)

Ez a megoldás lehetővé teszi, hogy az azt támogató böngésző kötőjelet illesszen be, és a nem támogató böngészők esetén egy sortörést.

Határozza meg a hosszú szavak csomagolásának módját:

1. csak ott, ahol van kötőjel, szóköz vagy Enter (kivéve a nem törő szóközt és a nem törő kötőjelet-). Egy kötőjelet írnak egy szó részei közé (például piros és sárga), szavak közé - kötőjelbe. "Lágy kötőjel" - csak akkor jelenik meg, ha elválasztásra van szükség. Ha a szó kívül esik a szülő hatáskörén, akkor vagy egy részét kötőjel nélkül átviszi. A mínusz matematikai kifejezésekben használatos (például 5 - 2). Digitális vonal jelenik meg a telefonszámokban (például +7 800 000‒00‒00). És mindez nem olyan ismerős - ez a billentyűzeten van.
2. bármely karakter után.
3. az orosz nyelv szabályai szerint, automatikus elválasztással.

túlcsordulás-pakolás
sortörés
szótörés
sortörés
kötőjelek

ezerkilencszázkilencvenkilenc kilogrammunkat már újra megvizsgálták grubber-buldózer-rakodó

Mi a különbség az egyik ingatlan és a másik között

Alapértelmezés szerint a hosszú szavak nem kötőjellel vannak írva, kivéve, ha kifejezetten kötőjele jelzi, és új sorban kezdődnek.

Annak érdekében, hogy figyelmen kívül hagyjuk a szemmel azonnal látható sorokat, hozzáadjuk a szótörést: keep-all; ...

Annak érdekében, hogy a böngésző ne figyeljen a lágy kötőjelre, kötőjeleket illesztünk be: nincs; ...

Ha szókötés szükséges, akkor szóköteg: törésszó; Azt tanácsolom, hogy mindig használja, mivel minden böngésző megérti. Ez különbözik a szótöréstől: break-all; amely prioritást élvez abban, hogy a blokkba nem illő szavak új sorban kezdődnek, és tiszteletben tartják a lágy kötőjeles ajánlást.

Együtt használva szótörés: break-all; kötőjelekkel: auto; , az utóbbit figyelmen kívül hagyják. kötőjelek: auto; tetszőleges kötőjelet helyez el. Ahhoz azonban, hogy működjön, meg kell jelölnie a nyelvét a div = lang = "ru" attribútum megadásával.

Ne zárja be a szavakat egy másik sorba

Tegyük fel, hogy egy menüpont vagy gomb nem néz ki jól, ha szétesik. Ezért meg kell tiltani szétválasztásukat. Ehhez a fenti tulajdonságok mindegyikét "alapértelmezett" módba kell állítani, és hozzá kell adni. Kattintson és nézze meg sokszögünket.

Vezérlő szavak tördelése kötőjeleknél: auto;

Tetrahidropiranil -ciklopentiltetrahidropiridopiridin

Üdv mindenkinek). Továbbra is írok a css nyelv különféle hasznos tulajdonságairól, amelyek így vagy úgy segíthetnek az elrendezésben. És ma szeretném elmondani, hogyan kell csomagolni a szavakat css -be, ha nem férnek bele a tárolóba. Mindent megmutatok egy igazi példával.

Kapcsolja be az elválasztást a nem megfelelő szavakhoz

Tegyük fel, hogy van egy 100 pixel széles blokkom, és bele kell írnom egy szöveget. A szöveg a következő szót tartalmazza: önkioldó". Ez például egy archívum) De nem ez a lényeg. A szó nagyon hosszú, csak nem fér bele a tartály szélességébe. Írjuk be egy ilyen keskeny blokkba (100 pixel). Mi fog történni?

Amint látja, a szegény szó kiszállt a konténerből, hát nincs hová mennie, mit tehet. És ez behúzás nélkül. Szóval, itt a szócsomagolási tulajdonság jön segítségre. Íme, mit kell kérnie egy blokktól a szócsomagolás engedélyezéséhez:

Szótörés: törésszó;

A meggyőzőség érdekében pedig párnázást is hozzáadhat. Tehát a tulajdonság alkalmazása után látjuk, hogy a túl hosszú szavak betűről betűre kerülnek egy másik sorba. Sőt, még akkor is, ha a második sor nem elég egy szóhoz, a többi része átkerül a harmadikba stb.

Szeretném leszögezni, hogy az ingatlan biztonságosan használható. Először is, nagyszerűen működik ma a böngészőkben. Másodszor, okosan működik. Ugyanis minden normál szónál nem lesz elválasztás, a teljes szavak átkerülnek a következő sorba, így az olvashatóság nem romlik. Ezen a képernyőképen láthatja.

Mikor kell használni a szókötegetést?

Valójában eddig 2 használati esetet látok. Az első csak a keskeny blokkokhoz való, ahol attól tart, hogy a hosszú szavak csúnyán kimászhatnak a blokkhatárokból. A második, amikor a tervező úgy fogant, hogy az oldal nevének több sorban kell szerepelnie.

Tehát ebben a cikkben megtanultuk, hogyan kell szavakba csomagolni a css -t. Nekem ma ennyi. Találkozunk.

Üdv mindenkinek és kezdjük. Tegyük fel, hogy a következő szöveg áll rendelkezésünkre:

Az Egyesült Arab Emírségek kormánya és a közigazgatás ebben a városban összpontosítja a legújabb technológiákat, amelyek a tudomány és a technológia legújabb vívmányain alapulnak, és megpróbálják megfordítani a jövő városát, mintha valami sci -fi film képernyőjéről került volna le. Ezek a technológiák magukban foglalják a rendőrségi robotokat, a robotkocsikat és a Hyperloop szállítási rendszert, és a nem túl távoli jövőben egy automatikus repülő taxi szolgáltatás kezd működni Dubajban. Erre az eseményre készülve pedig az elektromos kétüléses, 18 rotoros Volocopter, amelyet taxiként fognak használni, megtette első repülését automatikus üzemmódban-írják ...

itt jelöltünk néhány szöveget, amellyel most elkezdünk dolgozni.

És az első tulajdonságot, amelyet figyelembe fogunk venni, szótörésnek nevezzük.

szótörés: normál | tarts minden | törés

Főként ennek a tulajdonságnak a normál értéke két értéke érdekel minket - az alapértelmezett érték és a törés, amellyel beállítottuk, hogy a szavak tördelését karakterről karakterre hajtjuk végre. Mindent meg kell őrizni: ez az érték a szavak kínai, japán és koreai nyelvű csomagolására szolgál.

P (szótörés: törés;;)

Vegye figyelembe, hogy ennek a stílusnak az alkalmazása után az összes szövegünk a teljes rendelkezésre álló szélességre nyúlik, és a kötőjelet nem szavak, hanem karakterek hajtják végre. Ez a tulajdonság akkor lehet hasznos, ha van egy nagyon hosszú szavunk, amely nem fér bele az adott szélességbe. Ez azonban egyfajta kényelmetlenséget okoz, mivel abszolút minden szó karakterről karakterre kerül, még azok is, amelyek beleférnek az adott szélességbe.

Szerencsére van egy hasonló tulajdonság, amely csak nem illeszkedő szavakat visz át a karakterekre. Ezt nevezik túlcsordulásnak:

P (overflow-wrap: törésszó;)

és a törésszó alkalmazása után minden szövegünket szavakba csomagoljuk, és az adott szélességbe nem illő szavakat karakterről karakterre tekerjük. Mondhatjuk, hogy a feladat befejeződött! A törésszó értéken kívül ez a tulajdonság elfogadja:

túlcsordulás-csomagolás: normál | törésszó | örököl;

Most térjünk át a fejlettebb css tulajdonságra a szöveg betakarásához.

Tekintsük azt a fehér mező tulajdonságot, amellyel szimulálhatjuk az előcímke munkáját anélkül, hogy maga a szöveg monospace-re változna.

fehér-szóköz: normál | nowrap | pre | elővonal | előcsomagolás | örököl

Valójában ezzel a tulajdonsággal csak szóközökkel dolgozunk a szövegben. Például, ha a következő stílust alkalmazzuk szövegünkre:

Fehér-szóköz: nowrap;

minden sortörést figyelmen kívül hagyunk, és szövegünk egy sorban jelenik meg.

Fehér-szóköz: pre;

A pre esetében minden sortörés ugyanaz lesz, mint a forráskódban. Ezenkívül, ha a szöveg nem fér bele a megadott szélességbe, akkor nem lesz becsomagolva. Ha át akarjuk vinni, akkor meg kell adnunk a sor előtti értéket.

Ha nemcsak a sortöréseket szeretnénk figyelembe venni a forráskódban, hanem a szavak közötti szóközöket is, akkor meg kell adnunk:

Fehér tér: előcsomagolás;

Alapvetően ez minden, amit el akartam mondani a css -t használó szócsomagolásról. Remélem, hogy ez a cikk hasznos volt az Ön számára, és többször is hasznosítani fogja a megszerzett ismereteket.

Nos, búcsúzom tőled. Sok sikert és sok sikert kívánok! Viszlát!

Az elrendezés során a kiadóknak rendszeresen felmerül egy kérdésük: hogyan történik a szövegátvitel? A legtöbb esetben a böngésző önállóan kezeli ezt a feladatot. Néha azonban ezt a folyamatot kézben kell tartani, különösen olyan hosszú szavak és kifejezések tervezésével, amelyek helytelen kötőjelek esetén elveszítik jelentésüket.

A szótömörítő tulajdonság

A HTML -ben van egy speciális címke a karakterláncok elválasztására
... De túl gyakori használata rossz formának minősül a fejlesztők körében, és gyakran szakszerűtlenséget jelez. Bizonyítékként képzelje el, hogy rendelkezik logóval, és szeretné, ha minden betű új sorban kezdődne:

Az eredmény nehézkes és csúnya kód, amely minden fejlesztő számára kulturális sokkot okoz. És mi van, ha azt szeretné, hogy a logó vízszintes legyen az asztali verzióban, és függőlegesen, ha a képernyő szélessége kevesebb, mint 550 képpont? Ezért mindig lépcsőzetes stíluslapokat használjon az elemek megjelenésének testreszabásához. Sőt, a CSS -eszközök segítségével a sortörések elegánsabb módon történnek. Ugyanakkor nincs túlzott jelölés, ami csak lelassítja az oldal betöltési sebességét.

Az első tulajdonság, amelyet a szövegszerkesztésnél meg kell vizsgálni, a szövegtekercselés. Három értéket fogad el: normál, töréses és megtart. Csak a szünetre kell emlékeznie, hogy működjön. A normál az alapértelmezett, és nincs értelme megadni. A mindenben tartás azt jelenti, hogy a sortörés nem megengedett a CSS-dokumentumban. Kifejezetten kínai, japán és koreai karakterek számára készült. Ezért, ha nem ezen a nyelven szeretne blogot írni, akkor a tulajdonság nem lesz hasznos az Ön számára. A Safari böngésző és az iOS mobiltelefonok sem támogatják.

Ha az előző példában szereplő logó minden betűjéhez sortörést szeretne rendelni a CSS használatával, írja be a következő kódot:

P (betűtípus: félkövér 30 képpontos Helvetica, sans-serif; szélesség: 25 képpont; szóköteg: törés;)

A betűtípus szélessége és mérete úgy van kiválasztva, hogy elegendő hely legyen csak egy betű számára. A tördelő értékű szócsomagolás azt mondja a böngészőnek, hogy minden alkalommal új sorba tegye a szót. Ez a tulajdonság nem nevezhető pótolhatatlannak. De jól jön, ha szöveges kis tömböket tervez, például megjegyzések beírására szolgáló mezőket.

Fehér tér ingatlan

A kezdő webfejlesztők gyakori hibája, hogy szóközökkel vagy szövegbillentyűvel próbálják szerkeszteni a szöveget, majd azon tűnődnek, miért nem láthatók az erőfeszítéseik az oldalon. Nem számít, hányszor nyomja meg az Enter billentyűt, a böngésző figyelmen kívül hagyja. De van egy módja annak, hogy úgy jelenítse meg a szöveget, ahogy szeretné, és figyelembe veszi az összes szóközt.

Egy CSS dokumentumban a szóközök tulajdonságával hozzárendelt sortörések konfigurálhatók úgy, hogy figyelembe vegyék a szóközöket, vagy nyomja meg az Enter billentyűt. Az üres szóköz az előtti értékkel arra kényszeríti a böngészőt, hogy az Enter billentyűt jelenítse meg a szövegben.

Ha a CSS-kódban az elősorokat előtömörítésre módosítja, a sortörések figyelembe veszik a szóközöket. Ezzel szemben tiltsa le a kötőjeleket, ha a white-space tulajdonságot hozzárendeli a szöveghez a nowrap értékkel:

#csomagoló p (szín: #FFF; párnázás: 10 képpont; betűtípus: félkövér 16 képpont Helvetica, sans-serif; fehér-szóköz: nowrap;)

Szöveg-túlcsordulás

Egy másik hasznos eszköz a szöveggel való munkához a szöveg túlcsordulása. A sortöréseken kívül a CSS tulajdonság lehetővé teszi a tartalom kivágását, amikor a tároló tele van. Két érték kell hozzá:

• klip - csak vágja a szöveget;
• ellipszis - hozzáteszi az ellipszist.

#wrapper p (szín: #FFF; kitöltés: 10 képpont; betűtípus: félkövér 16 képpont Helvetica, sans-serif; text-overflow: ellipsis; / * Ellipszis hozzáadása * / white-space: nowrap; / * Sorok tördelésének letiltása * / overflow: rejtett; / * mindent elrejt a tartályon kívül * /)

A tulajdonság működéséhez az elemhez sortörést és túlcsordulást is hozzá kell rendelni a rejtett értékkel.