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?

html css

— محمد کثیری
source

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>

Développer l'extrait

— Maxime Lorant
source

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
}

— Gérard de Visser
source

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;
}

— Falguni Panchal
source

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;
}

1

Essaye ça

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

— Eswara Reddy
source

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;
}

— léopold
source

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

— sh6210
source