Pause Word plus intelligente en CSS?
Si je mets juste Word-break: break-all sur un élément, je me retrouve souvent avec ceci:
Bonjour les gens, je tape un mes
sauge trop longue pour tenir!
Évidemment, ce serait beaucoup mieux car:
Bonjour les gens, je tape un
message trop long pour tenir!
Mais en même temps, si quelqu'un écrit:
BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH !!!!!!
Alors je voudrais que ce soit:
BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH !!!!!!
Je n'arrive pas à trouver un moyen de le faire.
Notez que la largeur de l'élément n'est pas fixe et peut changer.
Essayez Word-break: break-Word; il doit se comporter comme prévu.
Pour beaucoup de nos projets, nous ajoutons généralement ceci si nécessaire:
.text-that-needs-wrapping {
overflow-wrap: break-Word;
Word-wrap: break-Word;
-ms-Word-break: break-all;
Word-break: break-Word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Il gère la plupart des situations étranges avec différents navigateurs.
Pour les sauts de mots intelligents ou pour les sauts de mots corrects en premier lieu, vous avez besoin de règles dépendantes de la langue. Pour l'anglais et de nombreuses autres langues, la rupture correcte signifie la césure, avec un trait d'union ajouté à la fin d'une ligne lorsqu'une rupture se produit.
En CSS, vous pouvez utiliser hyphens: auto , bien que vous deviez surtout le dupliquer à l'aide des préfixes des fournisseurs. Comme cela ne fonctionne pas sur IE 9, vous pouvez envisager la césure basée sur JavaScript comme Hyphenate.js à la place. Dans les deux cas, il est essentiel d'utiliser le balisage du langage ( lang attribut).
La rupture de longues chaînes insaisissables est un problème différent. Il serait préférable de les traiter lors du prétraitement, mais dans un cadre simple, Word-break: break-Word (ce qui signifie une rupture de mots incorrecte , en anglais par exemple) peut être considéré comme une urgence.