Comment utiliser les tirets automatiques CSS avec 'word-break: break-all'?
j'utilise word-break: break-all; et vous voulez savoir comment je peux avoir le navigateur insérer automatiquement l' traits d'union, comme démontré dans un exemple de MDN.
css lang-css prettyprint-override">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>tel que le texte ressemblerait à ceci:
aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa
j'ai créé un JSFiddle trop.
cela doit fonctionner dans IE9 / IE10, mais ce serait bien si cela fonctionnait aussi dans Firefox et Chrome.
3 réponses
-ms-hyphens la propriété ne fonctionne que dans IE10+. Ce n'est pas possible en IE9 ou plus bas.
voir le tableau de compatibilité du navigateur au bas du lien de référence que vous avez fourni.
Il ne fonctionne pas dans Chrome: WebKit Hyphenation
word-break propriété et de césure sont deux choses complètement différentes. Le premier, destiné à l'origine aux langues D'Asie de l'est principalement, fait de mauvaises choses à des langues comme l'anglais: il coupe arbitrairement des mots à certains endroits sans indiquer qu'un mot a été cassé N.
Donc, vous devez 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 la césure.
pour les traits d'Union, le code CSS en tant que tel est OK, bien que beaucoup de gens conseilleraient de mettre le cadre de propriété standard hyphens: auto en dernier, après le préfixe propriétés. Mais il exige que le langage du texte soit déclaré dans le markup HTML, en utilisant par exemple <div lang=en>. De plus, la prise en charge par le navigateur est encore limitée: IE 9 ne supporte pas ce type de trait d'Union, et la prise en charge dans IE 10 couvre un nombre relativement restreint de langues (y compris l'anglais bien sûr).
pour le trait d'Union automatique sur IE 9, Vous devez utiliser l'un ou l'autre côté du serveur un trait d'Union programmé ou, plus simple, un trait d'Union côté client avec des outils comme Hyphenator.js.
Les traits D'Union sont insérés si le navigateur prend en charge et que le langage inclut un dictionnaire de traits d'Union. Mais votre
aaaaaaaaaaaaaaaaaa
n'est pas dans un dictionnaire.
par conséquent, vous devez aller pour les traits d'Union doux comme dans https://jsfiddle.net/LJYj3/5/
voici plus de matière à réflexion:https://stackoverflow.com/a/856322/1696030