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

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?

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>

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

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

Comme ça

DEMO

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

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

Essaye ça

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

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

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