Comment puis-je envelopper ou couper du texte / mot long dans une largeur fixe?


104

Je veux créer une étendue avec une largeur fixe qui, lorsque je tape quelque chose dans la travée comme <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, une longue chaîne de texte non espacé, le (s) mot (s) se coupent ou reviennent à la ligne suivante.

Des idées?

Réponses:


192

Vous pouvez utiliser la propriété CSS word-wrap:break-word;, qui cassera les mots s'ils sont trop longs pour la largeur de votre span.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>


1
Fonctionne bien pour le contrôle d'étiquette asp.net. Merci!
etlds

41
L'ajout white-space: normalaide à remplacer le style extérieur qui peut gêner :) .. inline-blockfonctionne aussi bien queblock
Katia

Qu'en est-il de la rupture de deux travées qui sont à l'intérieur d'un élément de bloc?
Daniel Springer le

Pour ceux qui ont encore des problèmes après avoir utilisé cette réponse, assurez-vous de spécifier une `` largeur '', sinon cela pourrait ne pas fonctionner
Staccato

Il doit avoir une largeur pour savoir où casser
DFSFOT

40

Essayez de suivre le CSS avec l'ajout de white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

5
Merci! Je ne pouvais pas comprendre pourquoi mon texte n'était jamais enveloppant! l'espace blanc était la raison.
mdiehl13

1
Mon problème a également été résolu une fois que j'ai mis:white-space: normal
majorBummer

Voici un tableau de référence au cas où vous auriez besoin d'un espace blanc et d'un wrapping: css-tricks.com/almanac/properties/w/whitespace
Hritik

16

Comme ça

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

mon ami je veux quand mettre la largeur de portée: 50px; les valeurs de mon envergure ne s'affichent qu'en 50px et les autres valeurs passent à la ligne suivante et s'affichent en 50px !!!
محمد کثیری

1
@ mamal10 Vérifiez la solution de Maxime Lorant.
Mr_Green

3

Par défaut, a spanest un inlineélément ... donc ce n'est pas le comportement par défaut.

Vous pouvez faire en sorte que le spanse comporte de cette façon en ajoutant display: block;à votre CSS.

span {
    display: block;
    width: 100px;
}


0

Juste pour étendre la portée pratique de la question et en annexe aux réponses données: Parfois, on peut trouver nécessaire de préciser un peu plus les sélecteurs.

En définissant l'étendue complète comme display: inline-block, vous pourriez avoir du mal à afficher des images.

Par conséquent, je préfère définir une étendue comme ceci:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

0

Dans mon cas, display: block cassait le design comme prévu.

La max-widthpropriété vient de me sauver.

et pour le style, vous pouvez également utiliser text-overflow: ellipsis.

mon code était

max-width: 255px
overflow:hidden
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.