Comment puis-je envelopper ou interrompre un long texte/mot dans un espace de largeur fixe ?

Question

Je veux créer un span avec une largeur fixe qui, lorsque je tape quelque chose dans le span comme <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span> Dans le cas d'une longue chaîne de texte non espacée, le ou les mots s'interrompent ou passent à la ligne suivante.

Des idées ?

Answer 1

Vous pouvez utiliser la propriété CSS word-wrap:break-word; qui casse les mots s'ils sont trop longs pour la largeur de l'écran.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Answer 2

Essayez le fichier css suivant en ajoutant l'élément white-space :

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

Answer 3

Comme ceci

DEMO

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

Answer 4

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

Vous pouvez faire le span se comporter de cette manière en ajoutant display: block; à votre CSS.

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

Answer 5

Essayez ceci

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