Comment couper un mot sur un tiret ?

Étant donné un CSS relativement simple :

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Comment puis-je faire en sorte que la chaîne reste contrainte au width de 150, et se termine simplement par une nouvelle ligne sur le trait d'union ?

请先 登录 后评论

2 réponses

Dave Rutledge

Votre exemple fonctionne comme prévu dans Google Chrome, Safari (Windows) et IE8. Le texte sort de la zone 150px dans Firefox 3 et Opera 9.5.

De plus, &shy; ne fonctionnera pas pour votre exemple, car il fonctionnera non plus :

  • fonctionne lors de la rupture de mots mais lorsqu'il n'y a pas de rupture de mots, n'affiche aucun trait d'union, ou

  • fonctionne lorsqu'il n'y a pas de rupture de mots, mais affiche deux traits d'union lors de la rupture de mots car il ajoute un trait d'union sur une pause.

请先 登录 后评论
Orion

Selon ce que vous voulez voir exactement, vous pouvez utiliser une combinaison de hyphen, soft hyphen et/ou zero width space.

Sur un trait d'union souple, votre navigateur peut couper les mots (en ajoutant un trait d'union). Sur un espace de largeur nulle, votre navigateur peut couper les mots (sans rien ajouter).

Ainsi, si votre code est quelque chose comme :

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

Votre navigateur l'affichera alors sans saut de mot :

1111112222222-33333334444444-5555555

et ce sera tous les sauts de mots possibles :

111111-
222222-
-333333
444444-
555555

Choisissez simplement l'option dont vous avez besoin. Dans votre cas, il peut s'agir de celui entre 4s et 5s.

请先 登录 后评论