Comment casser des mots sur un tableau de bord ?

StackOverflow https://stackoverflow.com/questions/904

  •  08-06-2019
  •  | 
  •  

Question

É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 passe simplement à une nouvelle ligne sur le trait d'union ?

Était-ce utile?

La solution

Remplacez vos tirets par ceci :

&shy;

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

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

Autres conseils

Dans tous les navigateurs modernes* (et dans certains navigateurs plus anciens, aussi), le <wbr> élément est l'outil parfait pour offrir la possibilité de rompre des mots longs à des moments précis.

Pour citer ce lien :

L'opportunité de coupure de mots (<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 de saut de ligne à cet emplacement.

Voici comment il pourrait être utilisé dans l'exemple du PO (ou voyez-le en action sur 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>

Faisant partie de CSS3, il n'est pas encore entièrement pris en charge, mais vous pouvez trouver des informations sur le retour à la ligne ici.Une autre option est le balise wbr, , et ​ dont aucun n’est entièrement pris en charge non plus.

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

En plus &shy; ne fonctionnera pas pour votre exemple, car ce sera non plus :

  • fonctionne lors de la coupure de mots mais lorsqu'il ne s'agit pas de coupure de mots, n'affiche aucun trait d'union, ou

  • Travaillez lorsqu'il n'est pas révolutionnaire mais affichez deux tirets lorsqu'ils sont révolutionnaires car il ajoute un trait d'union sur une pause.

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

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

En fonction de 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 logiciel, votre navigateur peut couper des mots (en ajoutant un trait d'union).Sur un espace de largeur nulle, votre navigateur peut couper des mots (sans rien ajouter).

Ainsi, si votre code ressemble à :

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

votre navigateur affichera alors ceci sans coupure de mot :

1111112222222-33333334444444-5555555

et ceci fera 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 secondes.

Vous pouvez aussi utiliser :

word-break:break-all;

ex.

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

sortir:

abababababa
ababababbba
abbabbababa
ababb

Le saut de mot consiste à couper tout le mot ou la ligne même s'il n'y a pas d'espace dans la phrase et qu'il n'y a pas de pieds dans la largeur ou la hauteur fournie.écrou pour cela il faut prévoir une largeur ou une hauteur.

Le trait d’union insécable fonctionne bien.

Entité HTML (décimal) 

&#8209;

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

Assurez-vous également que traits d'union la propriété CSS était pas mis à aucun (La valeur par défaut est manuel).

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

J'espère que cela pourra aider

utiliser <br>(break) balise où vous souhaitez rompre la ligne.

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>

si vous voulez un saut de ligne avant d'utiliser un trait d'union &#8203;- plutôt.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top