html - Comment rédiger

Translate

Étant donné un CSS relativement simple:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>
This question and all comments follow the "Attribution Required."

Toutes les réponses

Translate

Remplacez vos traits d'union par ceci:

&shy;

C'est ce qu'on appelle un trait d'union «souple».

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>
La source
Translate

Dans tous les navigateurs modernes*(et dans certainsnavigateurs plus anciensaussi), le<wbr>élémentest l'outil parfait pour donner la possibilité de casser des mots longs à des moments précis.

Pour citer ce lien:

L'opportunité Word Break (<wbr>) L'élément HTML représente une position dans le texte où le navigateur peut éventuellement couper une ligne, bien que ses règles de saut de ligne ne créeraient pas autrement une coupure à cet emplacement.

Voici comment il pourrait être utilisé dans l'exemple du PO (ou le voir en action àJSFiddle):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

*Je l'ai testé dans IE9, IE10 et les dernières versions de Chrome, Firefox, Opera et Safari.

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

Dans le cadre de CSS3, il n'est pas encore totalement pris en charge,mais vous pouvez trouver des informations sur l'habillage de mots ici. Une autre option est lebalise wbr, & shy ;, et & # 8203;aucun d'entre eux n'est entièrement pris en charge non plus.

La source
Translate

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

aditionellement&shy;ne fonctionnera pas pour votre exemple, car cela fonctionnera non plus:

  • fonctionne lors de la rupture de mots, mais sans rupture de mots, n'affiche aucun trait d'union, ou

  • fonctionne lorsque vous ne sautez pas de mots, mais affichez deux traits d'union lors de la rupture de mots car il ajoute un trait d'union sur une pause.

La source
Translate

Dans cet exemple spécifique (où votre chaîne va contenir des traits d'union), je transformerais le texte en ce côté serveur:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
La source
Translate

En fonction de ce que vous voulez voir exactement, vous pouvez utiliser une combinaison dehyphen, soft hyphen, et / ouzero width space.

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

Ainsi, si votre code est quelque chose comme:

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

alors votre navigateur affichera ceci sans interruption de mot:

1111112222222-33333334444444-5555555

et cela coupera tous les mots possibles:

111111-
222222-
-333333
444444-
555555

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

La source
Translate

Vous pouvez aussi utiliser :

word-break:break-all;

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

production:

abababababa
ababababbba
abbabbababa
ababb

word-break est de casser tout le mot ou la ligne même s'il n'y a pas d'espace dans la phrase qui ne correspond pas à la largeur ou à la hauteur fournies. écrou pour cela vous devez fournir une largeur ou une hauteur.

La source
Translate

Le trait d'union insécable fonctionne bien.

Entité HTML (décimal)

&#8209;
La source
Translate

Au lieu de-vous pouvez utiliser&hyphen;ou\u2010.

Assurez-vous également que letraits d'unionla propriété css étaitne pasmis àaucun(La valeur par défaut estManuel).

<wbr>n'est pas pris en charge parInternet Explorer.

La source
Translate

J'espère que cela peut aider

utilisation<br>(break) tag où vous souhaitez couper la ligne.

La source
Translate

Vous pouvez utiliser un espace de largeur 0 après le trait d'union:

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>
La source