web-dev-qa-db-fra.com

Comment puis-je envelopper ou casser un texte long / Word sur une largeur fixe?

Je souhaite créer une étendue de largeur fixe qui, lorsque je tape un élément quelconque dans la même étendue, comme <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, une longue chaîne de texte non-espacée, le ou les mots coupés ou renvoyés à la ligne suivante.

Des idées?

htmlcss
87
محمد کثیری

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

span { 
    display:block;
    width:150px;
    Word-wrap:break-Word;
}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>
163
Maxime Lorant

Essayez de suivre les CSS:

span {
    display: block;
    Word-wrap:break-Word;
    width: 50px;
    white-space: normal
}
20
Gerard de Visser

Comme ça

DÉMO

  li span{
    display:block;
    width:50px;
    Word-break:break-all;
}
15
Falguni Panchal

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

Vous pouvez faire en sorte que la span se comporte de cette manière en ajoutant display: block; à votre CSS.

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

Essaye ça

span {
    display: block;
    width: 150px;
}
1
Eswara Reddy

Juste pour étendre le champ d’application de la question et en annexe aux réponses données: on pourrait parfois juger nécessaire de préciser un peu plus les sélecteurs.

En définissant l'étendue complète comme display: inline-block, vous aurez peut-être de la difficulté à afficher des images.

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

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
leopold

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

La propriété max-width vient de me sauver.

et pour le style, vous pouvez aussi utiliser text-overflow: Ellipsis.

mon code était

max-width: 255px
overflow:hidden
0
sh6210