Il y a des moments où une très longue chaîne de texte peut déborder le conteneur d'une mise en page.
Par exemple:
Voici le scoop:
overflow-wrap: break-word;s'assure que la longue ficelle s'enroulera et ne sortira pas du conteneur. Vous pourriez aussi bien les utiliserword-wrapcar, comme le dit la spécification, ils ne sont littéralement que des noms alternatifs. Certains navigateurs prennent en charge l'un et pas l'autre. Firefox (testé v43) prend uniquement en chargeword-wrap. Blink (testé Chrome v45) prendra l'un ou l'autre.- Avec une
overflow-wraputilisation à elle seule, les mots se briseront un peu partout où ils en auront besoin. S'il y a un caractère «coupure acceptable» (comme un tiret littéral, par exemple), il se brisera là, sinon il fera juste ce qu'il doit faire. - Vous pourriez aussi bien l'utiliser
hyphens, car alors il essaiera d'ajouter avec goût un trait d'union là où il se brise si le navigateur le prend en charge (Blink ne le fait pas au moment de la rédaction, Firefox le fait). word-break: break-all;est de dire au navigateur qu'il est correct de casser le mot partout où il en a besoin. Même si c'est un peu le cas de toute façon, je ne suis pas sûr dans quels cas c'est 100% nécessaire.
Si vous voulez être plus manuel avec des tirets, vous pouvez les suggérer dans votre balisage. En savoir plus sur la page MDN.
Prise en charge du navigateur
Pour word-break:
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Pour hypens:
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 88 | 6 * | dix* | 12 * | 5,1 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 4,2 à 4,3 * |
Pour overflow-wrap:
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Pour text-overflow:
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 2,1 | 3.2 |
Empêcher le débordement avec les ellipses
Une autre approche à considérer consiste à tronquer complètement le texte et à ajouter des ellipses là où la chaîne de texte atteint le conteneur:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Cette bonne chose à propos de l'utilisation text-overflowest qu'elle est prise en charge universellement.
Exemples
Voir la césure du stylo mots longs par CSS-Tricks (@ css-tricks) sur CodePen.
Voir les ellipses de stylet par CSS-Tricks (@ css-tricks) sur CodePen.
Voir l'habillage de lignes par Chris Coyier (@chriscoyier) sur CodePen.
Plus de ressources
- Michael Scharnagl: Gérer les mots longs en CSS
- Kenneth Auchenberg: wrapping / coupure de mots avec CSS
- MDN: retour à la ligne, saut de mots, traits d'union
- Spec: Texte CSS niveau 3
Pour les inclinés SCSS
Celles-ci ont tendance à être le genre de choses que vous saupoudrez dans le code si nécessaire, donc elles font de jolis @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; )