A overflow-wrapCSS tulajdonság lehetővé teszi annak megadását, hogy a böngésző a megcélzott elem belsejében lévő szövegsort több sorra is felbonthatja, egyébként törhetetlen helyen. Ez segít elkerülni a szokatlanul hosszú szövegsort, amely elrendezési problémákat okoz a túlcsordulás miatt.
.example ( overflow-wrap: break-word; )Értékek
normal: az alapértelmezett. A böngésző a szokásos vonaltörési szabályok szerint törli a vonalakat. A szavak vagy a töretlen húrok nem szakadnak meg, még akkor sem, ha túlcsordulnak a tartályon.break-word: olyan szavak vagy karakterláncok, amelyek túl nagyok ahhoz, hogy elférjenek a tárolójukban, tetszőleges helyen törnek meg, hogy sortörést kényszerítsenek. Kötőjel nem kerül beszúrásra, még akkor sem, ha ahyphenstulajdonságot használják.inherit: a megcélzott elemnek örökölnie kelloverflow-wrapa közvetlen szülőjén meghatározott tulajdonság értékét .
Az alábbi demóban van egy váltógomb, amely lehetővé teszi a normalés a közötti váltást break-word.
Lásd Louis Lazaris (@impressivewebs) Pen overflow-wrap / word-wrap bemutatóját a CodePen-en.
A overflow-wrapmegoldani próbáló probléma bemutatásához a demo szokatlanul hosszú szót használ egy viszonylag kis tartályban. A break-wordbekapcsoláskor a szó megtörik, hogy elférjen a rendelkezésre álló kis hely, mintha a szó több szó lenne.
A nem törő szóközökből álló karakterláncokat ( ) ugyanúgy kezelnék, és a megfelelő helyen is elszakadnának.
overflow-wrapakkor hasznos, ha olyan elemekre alkalmazzák, amelyek nem moderált, felhasználó által létrehozott tartalmat tartalmaznak (például a megjegyzések szakaszok). Ez megakadályozhatja, hogy a hosszú URL-címek és más töretlen szövegsorok (pl. Vandalizmus) megtörjék a weboldal elrendezését.
Az word-breakingatlanhoz hasonlóságok
overflow-wrapés word-breaknagyon hasonlóan viselkednek, és hasonló problémák megoldására használhatók fel. A különbség alapvető összefoglalása a CSS specifikációban leírtak szerint:
overflow-wrapáltalában a hosszú karakterláncokkal kapcsolatos problémák elkerülésére szolgál, amelyek a tárolón kívül áramló szöveg miatt törött elrendezést okoznak.word-breakmegadja a soft wrap lehetőségeket olyan betűk között, amelyek általában olyan nyelvekhez vannak társítva, mint a kínai, japán és koreai (CJK).
Miután leírta word-breaka CJK-tartalomban való felhasználás példáit , a specifikáció azt mondja: "Ha további túlszakadási lehetőségeket csak túlcsordulás esetén engedélyez, lásd overflow-wrap".
Ebből azt feltételezhetjük, hogy word-breaka legjobban nem angol nyelvű tartalom esetén használható, amely speciális szótörő szabályokat követel meg, és amelyek esetleg angol nyelvű tartalommal tarkítottak, miközben overflow-wrapa hosszú karakterláncok miatti törött elrendezések elkerülésére kell használni, függetlenül a használt nyelvtől .
A történelmi word-wraptulajdon
overflow-wrapaz elődje, a word-wraptulajdonság szokásos neve . word-wraperedetileg egy kizárólag az Internet Explorer tulajdonában lévő szolgáltatás volt, amelyet végül minden böngésző támogatott annak ellenére, hogy nem szabványos.
word-wrapugyanazokat az értékeket fogadja el, overflow-wrapés ugyanúgy viselkedik. A specifikáció szerint a böngészőknek „ word-wrapaz overflow-wrapingatlan alternatív neveként kell kezelniük , mintha rövidítés lenne overflow-wrap”. Ezenkívül minden felhasználói ügynöknek word-wrapkorlátlan ideig támogatnia kell , örökölt okokból.
Mindkettő, overflow-wrapés word-wrapát fogja adni a CSS-ellenőrzést, mindaddig, amíg az érvényesítő a CSS3 vagy annál magasabb szintű tesztre van állítva (jelenleg az alapértelmezett).
Összefüggő
- szótörés
- kötőjelek
- fehér űr
- Hosszú szavak és URL-ek kezelése
Több információ
- Word-Wrap: Minden böngészőben működő CSS3 tulajdonság
- Túlcsordulás a W3C-n
- Vita a verem túlcsordulásáról a
word-breakvs.overflow-wrap
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 23 | 49 | 11. | 18. | 6.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
A fent említett „részleges” támogatás annak köszönhető, hogy a régebbi böngészők támogatják, word-wrapde nem overflow-wrap. Mindkettő használata biztosíthatja a visszafelé kompatibilitást.
A szerkesztő W3C specifikációjának vázlatos változata tartalmaz egy új értéket, amelyet úgynevezett break-spaces„megőrzött” szóközök sorozatával foglalkoznak. Ennek a szolgáltatásnak nincs ismert böngészőtámogatása, és nem szerepel a specifikáció munka vázlat verziójában.