Empêcher le saut de ligne de l'élément span

Question

J'ai un <span> que je veux afficher sans saut de ligne. Comment puis-je le faire ?

Answer 1

Mettez ceci dans votre CSS :

white-space:nowrap;

Pour en savoir plus, cliquez ici : http://www.w3.org/wiki/CSS/Properties/white-space

white-space

El white-space déclare comment l'espace blanc à l'intérieur de l'élément est traité.

Valeurs

normal Cette valeur indique aux agents utilisateurs de réduire les séquences d'espace blanc et de rompre les lignes si nécessaire pour remplir les cases de ligne.

pre Cette valeur empêche les agents utilisateurs de regrouper les séquences d'espaces blancs. Les lignes ne sont coupées qu'aux nouvelles lignes dans la source, ou aux occurrences de " \A " dans le contenu généré.

nowrap Cette valeur réduit les espaces blancs comme pour "normal", mais supprime les sauts de ligne dans le texte.

pre-wrap Cette valeur empêche les agents utilisateurs de regrouper les séquences d'espaces blancs. Les lignes sont coupées aux nouvelles lignes dans le source, aux occurrences de " \A " dans le contenu généré, et autant que nécessaire pour remplir les cases de ligne.

pre-line Cette valeur indique aux agents utilisateurs de réduire les séquences d'espace blanc. Les lignes sont coupées aux nouvelles lignes dans la source, aux occurrences de " \A " dans le contenu généré, et autant que nécessaire pour remplir les cases de ligne.

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

Answer 2

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 line break

au lieu de

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

Answer 3

white-space: nowrap est la solution correcte mais elle empêchera toute rupture de ligne. Si vous souhaitez uniquement 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 empêcher les ruptures entre les travées mais autoriser les ruptures entre "Some" et "text", on peut procéder comme suit :

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

C'est suffisant pour Firefox. Dans Chrome, vous devez en outre remplacer les espaces entre les travées par des caractères de type   . (Enlever l'espace blanc ne fonctionne pas).

Answer 4

Avec la classe Bootstrap 4 :

text-nowrap

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