Mõnikord võib tõeliselt pikk tekstistring paigutuse konteineri üle voolata.
Näiteks:
Siin on kühvel:
overflow-wrap: break-word;hoolitseb selle eest, et pikk nöör keeraks ja ei kaoks anumast välja. Võite sama hästi kasutadaword-wrap, sest nagu spetsifikatsioon ütleb, on need sõna otseses mõttes lihtsalt üksteise asendusnimed. Mõni brauser toetab ühte ja mitte teist. Firefox (testitud v43) toetab ainultword-wrap. Blink (testitud Chrome v45) võtab ühe.- Kasutades
overflow-wrapiseenesest, murduvad sõnad kõikjal, kuhu vaja. Kui leidub mõni „vastuvõetava katkemise” tähemärk (näiteks sõnasõnaline kriips), siis see katkeb seal, muidu teeb ta lihtsalt seda, mida ta peab tegema. - Võite sama hästi kasutada
hyphens, sest siis proovib see maitsekohaselt lisada sidekriipsu, kui see katkeb, kui brauser seda toetab (Blink seda kirjutamise ajal ei tee, Firefox seda teeb). word-break: break-all;on öelda brauserile, et sõna katkestamine on igati vajalik. Isegi kui ta seda niikuinii teeb, pole ma kindel, millistel juhtudel on see 100% vajalik.
Kui soovite sidekriipsudega käsitsi kasutada, võite neid oma märgistuses soovitada. Lisateavet leiate MDN-i lehelt.
Brauseri tugi
Poolt word-break:
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0–9,2 |
Poolt hypens:
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2–4,3 * |
Poolt overflow-wrap:
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0–7,1 |
Poolt text-overflow:
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Ülevoolu ärahoidmine ellipsiga
Teine arvestatav lähenemisviis on teksti kärpimine täielikult ja ellipside lisamine, kui tekstistring tabab konteinerit:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Selle toreda kasutamise juures text-overflowon see, et seda toetatakse universaalselt.
Näited
Vaadake CodePenil CSS-Tricksi pika pliiatsi sidekriipimist (@ css-tricks).
Vaadake CodePeni saidil CSS-Tricks (@ css-tricks) kirjutatud pliiatsi ellipsid.
Vaadake Code Cenilt Chris Coyieri (@chriscoyier) pliiatsi joonistamise joont.
Rohkem ressursse
- Michael Scharnagl: Pikkade sõnadega toimetulek CSS-is
- Kenneth Auchenberg: sõnade mähkimine / sidumine CSS-i abil
- MDN: sõnamähis, sõnamurd, sidekriipsud
- Spetsifikatsioon: CSS-i tekstitase 3
SCSS-i kaldu jaoks
Need kipuvad olema sellised asjad, mida vajadusel koodi sisse puistate, nii et need sobivad kena @mixins jaoks:
@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; )