web-dev-qa-db-fra.com

Comment utiliser les tirets CSS automatiques avec `Word-break: break-all`?

J'utilise Word-break: break-all; et je veux savoir comment je peux faire en sorte que le navigateur insère automatiquement le tirets , comme le montre un exemple MDN .

div {
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
  border: 1px solid red;
  Word-break: break-all;
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Telle que le texte ressemblerait à ceci:

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

J'ai aussi créé un JSFiddle .

Cela doit fonctionner dans IE9/IE10, mais ce serait bien si cela fonctionnait dans Firefox et Chrome également.

csscss3word-break
21
chovy

Le -ms-hyphens la propriété ne fonctionne que dans IE10 +. Ce n'est pas possible dans IE9 ou en dessous.

Consultez le tableau de compatibilité du navigateur au bas du lien de référence que vous avez fourni.

Cela ne fonctionne pas en Chrome pour l'instant: WebKit Hyphenation

8
Ben Lee

Le Word-break la propriété et la césure sont deux choses complètement différentes. Le premier, destiné à l'origine aux langues d'Asie de l'Est principalement, fait du tort à des langues comme l'anglais: il coupe arbitrairement des mots sur certains points sans indiquer qu'un mot a été cassé.

Vous devez donc décider si vous avez une expression où un saut de ligne peut être inséré par un navigateur à tout moment ou si vous voulez une césure.

Pour la césure, le code CSS en tant que tel est OK, bien que beaucoup de gens conseillent de mettre le paramètre de propriété standard hyphens: auto dernier, après les propriétés préfixées. Mais cela nécessite que la langue du texte soit déclarée dans le balisage HTML, en utilisant par exemple <div lang=en>. De plus, la prise en charge du navigateur est toujours limitée: IE 9 ne prend pas en charge une telle césure, et la prise en charge de IE 10 couvre un ensemble relativement restreint de langues (y compris l'anglais bien sûr).

Pour la césure automatique sur IE 9, vous devez utiliser la césure programmée côté serveur ou, plus simple, la césure côté client avec des outils comme Hyphenator.js .

21
Jukka K. Korpela

Les tirets sont insérés si le navigateur prend en charge la langue et comprend un dictionnaire de césure. Mais votre

aaaaaaaaaaaaaaaaaa

n'est pas dans un dictionnaire.

Par conséquent, vous devez opter pour des tirets doux comme dans https://jsfiddle.net/LJYj3/5/

Voici plus de matière à réflexion: https://stackoverflow.com/a/856322/16960

3
Volker E.