Empêcher la rupture de ligne de l'élément span

243

J'ai un <span>élément que je veux afficher sans aucun saut de ligne. Comment puis je faire ça?

html css

— Randomblue
source

si vous cherchez à les supprimer, consultez stackoverflow.com/questions/425274/…

— amwinter

409

Mettez ceci dans votre CSS:

white-space:nowrap;

Obtenez plus d'informations ici: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

La white-spacepropriété déclare comment l'espace blanc à l'intérieur de l'élément est géré.

Valeurs

normal Cette valeur demande aux agents utilisateurs de réduire les séquences d'espaces blancs et de couper les lignes si nécessaire pour remplir les zones de ligne.

pre Cette valeur empêche les agents utilisateurs de réduire les séquences d'espaces blancs. Les lignes sont interrompues uniquement aux sauts de ligne dans la source ou aux occurrences de "\ A" dans le contenu généré.

nowrap Cette valeur réduit l'espace blanc comme pour «normal», mais supprime les sauts de ligne dans le texte.

pre-wrap Cette valeur empêche les agents utilisateurs de réduire les séquences d'espaces blancs. Les lignes sont interrompues aux sauts de ligne dans la source, aux occurrences de "\ A" dans le contenu généré et, si nécessaire, pour remplir les zones de ligne.

pre-line Cette valeur indique aux agents utilisateurs de réduire les séquences d'espaces blancs. Les lignes sont interrompues aux sauts de ligne dans la source, aux occurrences de "\ A" dans le contenu généré et, si nécessaire, pour remplir les zones de ligne.

inherit Prend la même valeur spécifiée que la propriété du parent de l'élément.

— Daan
source

3

Aussi agréable d'ajouter plus de documentation ici: w3.org/wiki/CSS/Properties/white-space

— Justus Romijn

21

Par exemple, lorsque vous avez plusieurs plages à l'intérieur de div et que vous souhaitez atteindre une plage de ligne unique, mais pas une division de ligne unique, vous devez ajouter à span également afficher: inline-block;. J'espère que cela aidera quelqu'un.

— walv

16

Si vous avez seulement besoin d'empêcher les sauts de ligne sur les caractères d'espacement, vous pouvez utiliser des  entités entre les mots:

No&nbsp;line&nbsp;break

au lieu de

<span style="white-space:nowrap">No line break</span>

— Brent Washburne
source

1

white-space: nowrapest la bonne solution mais elle empêchera toute rupture de ligne. Si vous voulez seulement empêcher les sauts de ligne entre deux éléments, cela devient un peu plus compliqué:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

Pour éviter les interruptions entre les travées mais pour autoriser les interruptions entre "Certains" et "texte", vous pouvez:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

C'est assez bon pour Firefox. Dans Chrome, vous devez également remplacer l'espace blanc entre les portées par un  . (La suppression de l'espace blanc ne fonctionne pas.)

— millepertuis
source

1

Avec Bootstrap 4 Class:

text-nowrap

Réf: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

— Monsieur perfectionniste
source