Comment mot-break sur un tableau de bord?

voix
60

É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 limitée à widthde 150 , et enveloppe simplement une nouvelle ligne sur le trait d' union?

Créé 04/08/2008 à 01:17
source utilisateur
Dans d'autres langues...                            


11 réponses

voix
63

Remplacez vos traits d'union avec ceci:

&shy;

Il est appelé un trait d'union « soft ».

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

Créé 04/08/2008 à 01:25
source utilisateur

voix
31

Dans tous les navigateurs modernes * (et dans certains navigateurs plus anciens , aussi), l' <wbr>élément est l'outil idéal pour donner l'occasion de briser les mots longs à des points spécifiques.

Pour citer ce lien:

La Parole Pause Opportunité ( <wbr>élément HTML) représente une position dans le texte où le navigateur peut éventuellement briser une ligne, bien que ses règles de saut de ligne ne seraient pas autrement créer une pause à cet endroit.

Voici comment il pourrait être utilisé dans l'exemple de l'OP (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 et Opera, et Safari.

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

Créé 30/01/2012 à 07:53
source utilisateur

voix
17

Dans le cadre de CSS3, il est pas encore totalement pris en charge, mais vous pouvez trouver des informations sur le mot-emballage ici . Une autre option est le tag WBR, & shy ;, et & # 8203; aucun d' entre eux sont entièrement pris en charge non plus .

Créé 04/08/2008 à 01:25
source utilisateur

voix
8

Dans ce cas précis (où votre chaîne va contenir des traits d'union) Je transformerai le texte à ce côté serveur:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Créé 05/12/2008 à 13:36
source utilisateur

voix
8

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

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

  • travailler quand le mot révolutionnaire, quand ils ne mot cassantes pas afficher les traits d'union, ou

  • quand pas mot révolutionnaire mais affichage deux traits d'union quand le mot révolutionnaire car il ajoute un trait d'union sur une pause.

Créé 16/09/2008 à 00:15
source utilisateur

voix
7

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

Sur un trait d'union, votre navigateur peut mot-break (en ajoutant un trait d'union). Sur un espace de largeur zéro, votre navigateur peut casser mot (sans ajouter quoi que ce soit).

Ainsi, si votre code est quelque chose comme:

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

alors votre navigateur affichera ceci sans mot-break:

1111112222222-33333334444444-5555555

et cela tous les mots-break possibles:

111111-
222222-
-333333
444444-
555555

Il suffit de choisir l'option dont vous avez besoin. Dans votre cas, il peut être celui entre 4 s et 5 s.

Créé 16/09/2010 à 10:04
source utilisateur

voix
1

Vous pouvez aussi utiliser :

word-break:break-all;

ex.

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

sortie:

abababababa
ababababbba
abbabbababa
ababb

mot-break est tout casser le mot ou la ligne même si aucun espace dans la phrase qui ne en feets largeur ou la hauteur prévue. écrou pour que vous devez être fournir une largeur ou la hauteur.

Créé 27/08/2015 à 12:40
source utilisateur

voix
0

Vous pouvez utiliser 0 après l'espace largeur caractère tiret:

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

si vous voulez saut de ligne avant d' utiliser trait d' union à la &#8203;-place.

Créé 13/09/2018 à 10:21
source utilisateur

voix
0

Espérons que cela peut aider

utiliser <br>tag (break) où vous voulez briser la ligne.

Créé 31/08/2017 à 10:53
source utilisateur

voix
0

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

Aussi, assurez - vous que le traits d' union propriété css est pas réglé sur aucun (La valeur par défaut est manuel ).

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

Créé 14/05/2015 à 04:29
source utilisateur

voix
0

Le trait d'union insécable fonctionne bien.

Entité HTML (décimal)

&#8209;
Créé 21/03/2014 à 23:09
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more