Van, amikor egy igazán hosszú szövegsor túlcsordíthatja az elrendezés tárolóját.
Például:
Itt van a gombóc:
overflow-wrap: break-word;gondoskodik arról, hogy a hosszú húr beburkolódjon, és ne szakadjon ki a tartályból. Használhatjaword-wrapazt is, mert ahogy a specifikáció mondja, szó szerint csak alternatív nevek egymásnak. Egyes böngészők támogatják az egyiket, a másikat nem. A Firefox (tesztelt v43) csak támogatjaword-wrap. A Blink (tesztelt Chrome v45 verzió) egyiket igénybe veszi.- Ha
overflow-wrapa szavakat önmagában használjuk, a szavak bárhol megtörnek, ahol csak kell. Ha van egy „elfogadható törés” karakter (például egy szó szerinti kötőjel), akkor az ott fog törni, különben csak azt teszi, amit meg kell tennie. - Használhatja
hyphensazt is, mert akkor megpróbálja ízlésesen hozzáadni a kötőjelet, ahol elszakad, ha a böngésző támogatja (a Blink az íráskor nem, a Firefox igen). word-break: break-all;azt jelenti, hogy elmondja a böngészőnek, hogy rendben van a szó törése, ahol csak szükséges. Annak ellenére, hogy amúgy is ezt csinálja, így nem vagyok biztos benne, milyen esetekben szükséges.
Ha inkább kötőjellel szeretne kézibb lenni, javasolhatja őket a jelölésben. További információ az MDN oldalon.
Böngésző támogatás
Mellette word-break:
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 |
|---|---|---|---|---|
| 44. | 15 | 5.5 | 12. | 9. |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 9.0-9.2 |
Mellette hypens:
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 |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 4,2–4,3 * |
Mellette overflow-wrap:
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 |
Mellette text-overflow:
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 |
|---|---|---|---|---|
| 4 | 7 | 6. | 12. | 3.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
A túlcsordulás megakadályozása az ellipszissel
Egy másik megfontolandó megközelítés a szöveg teljes csonkítása és ellipszisek hozzáadása, ha a szövegsor eltalálja a tárolót:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Ez a szép dolog a használatban text-overflow, hogy univerzálisan támogatott.
Példák
Lásd a CSS-Tricks (@ css-tricks) tollhosszú szavainak hosszú elválasztását a CodePen-en.
Lásd a CSP-Tricks tollal ellipsziseket (@ css-tricks) a CodePen-en.
Lásd: Chris Coyier (@chriscoyier) a Pen Figuring Out Line Wrapping a CodePen-en.
További források
- Michael Scharnagl: Hosszú szavak kezelése a CSS-ben
- Kenneth Auchenberg: Szócsomagolás / elválasztás CSS használatával
- MDN: szócsomagolás, szótörés, kötőjelek
- Specifikáció: CSS 3. szintű szöveg
Az SCSS-re hajló
Ezek általában olyan dolgok, amelyeket szükség esetén kódba szórsz, így szép @mixineket készítenek:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )