On aikoja, jolloin todella pitkä tekstijono voi täyttää asettelun säilön.
Esimerkiksi:
Tässä on kauha:
overflow-wrap: break-word;varmistaa, että pitkä merkkijono kietoutuu eikä putoa ulos säiliöstä. Voit yhtä hyvin käyttääword-wrapkuin, koska kuten tekninen sanoo, ne ovat kirjaimellisesti vain vaihtoehtoisia nimiä toisilleen. Jotkin selaimet tukevat yhtä eikä toista. Firefox (testattu v43) tukee vainword-wrap. Blink (testattu Chrome v45) kestää jommankumman.- Kun
overflow-wrapsanoja käytetään yksinään, sanat hajoavat tavallaan missä tahansa. Jos on "hyväksyttävä tauko" -hahmo (kuten esimerkiksi kirjaimellinen viiva), se hajoaa siellä, muuten se vain tekee mitä tarvitsee. - Voit yhtä hyvin käyttää
hyphensmyös, koska silloin se yrittää lisätä tyylikkäästi väliviivan mihin se katkeaa, jos selain tukee sitä (Blink ei kirjoita kirjoitettaessa, Firefox tukee). word-break: break-all;on kertoa selaimelle, että on OK rikkoa sana missä tahansa. Vaikka se tavallaan tekee sen joka tapauksessa, joten en ole varma, missä tapauksissa se on 100% välttämätöntä.
Jos haluat olla tavallisempi tavuviivoilla, voit ehdottaa niitä merkinnöissäsi. Katso lisää MDN-sivulta.
Selaimen tuki
Mille word-break:
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Mille hypens:
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Mille overflow-wrap:
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Mille text-overflow:
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Ylivuotojen estäminen ellipsillä
Toinen harkittava lähestymistapa on lyhentää tekstiä kokonaan ja lisätä ellipsejä, jos tekstijono osuu säiliöön:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Tämä mukava asia käytön yhteydessä text-overflowon, että sitä tuetaan yleisesti.
Esimerkkejä
Katso CSS-Tricksin kynän tavutuksen pitkät sanat (@ css-tricks) CodePenistä.
Katso CSS-Tricksin kynän ellipsit (@ css-tricks) CodePenistä.
Katso Chris Coyierin (@chriscoyier) kynä, joka kuvaa linjan käärimistä CodePenissä.
Lisää resursseja
- Michael Scharnagl: Pitkät sanat CSS: ssä
- Kenneth Auchenberg: Sanan rivitys / tavutus CSS: n avulla
- MDN: sanan rivitys, sananvaihto, väliviivat
- Spec: CSS-tekstitaso 3
SCSS-kalteville
Nämä ovat yleensä sellaisia asioita, jotka ripottelet koodiin tarvittaessa, joten ne tekevät mukavia @mixins:
@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; )