Plus intelligente coupure de mot en CSS?

Question

Si je viens de mettre word-break: break-all sur un élément, je me suis souvent retrouver avec ceci:

Bonjour les gens, je suis en tapant mes
sage c'est trop long!

Évidemment, ce serait beaucoup mieux que:

Bonjour les gens, je me suis tapé une
message est trop long pour tenir!

Mais en même temps, si quelqu'un écrit:

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!!

Ensuite, je veux qu'il 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.

Answer 1

Essayez word-break: break-word; il doit se comporter comme vous vous attendez.

Answer 2

Pour beaucoup de nos projets, nous avons l'habitude d'ajouter à cette le cas échéant:

.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 bizarre situations avec les différents navigateurs.

Answer 3

Pour la smart des césures, ou pour correct des césures, en premier lieu, vous avez besoin dépend du langage de règles.Pour l'anglais et plusieurs autres langues, la rupture des moyens de césure, avec un trait d'union ajouté à la fin d'une ligne lors d'une rupture se produit.

Dans le CSS, vous pouvez utiliser hyphens: auto, si vous avez souvent besoin de dupliquer à l'aide du fournisseur de préfixes.Comme cela ne fonctionne pas sur internet explorer 9, vous pouvez envisager de JavaScript césure comme Hyphenate.js au lieu de cela.Dans les deux cas, il est essentiel d'utiliser un langage de balisage (lang attribut).

La rupture de long, unhyphenateable chaînes est un problème différent.Ils seraient mieux traitées dans le prétraitement, mais dans un cadre simple, word-break: break-word (ce qui signifie incorrect la rupture de mots, en anglais par exemple) peut être considérée comme une urgence.