[Résolu] Empêcher le retour à la ligne pour un texte d'un bouton

Bonjour bonjour,

J'ai des boutons CSS avec du texte composé de plusieurs mots. Entre les mots, des espaces (mouarf ^^).
Problème ? Lorsque je réduis ma fenêtre pour avoir un affichage "mobile" en faisant jouer le responsive de mon site, les boutons se fractionnent en plusieurs lignes car les espaces ne sont pas insécables et le texte coule.

J'ai essayé ça : white-space:nowrap;

Problème ? Ben les boutons ne reviennent pas à la ligne les uns au dessus des autres lorsque la fenêtre est minimisée, ils s'affichent en inline avec un ascenseur horizontal et dépassent donc du parent.

Que faire svp ?

Merci de votre aide.

//EDIT : en fait, j'ai joué dans les différentes CSS de mon thème et j'ai réussi.
Modifié par myself (01 Sep 2015 - 08:55)

Bonjour,
Il faut isoler cette règle et la mettre dans un media queries.

Exemple pour une résolution supérieure à 400px :

@media (min-width: 400px){
.selecteur {
    propriété: valeur;
}
} /* END @media */

Bonjour,

Selon le contexte, tu peux aussi vouloir utiliser ce comportement :

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Il permet d'empêcher le retour à la ligne d'un texte et ajoute trois petits points à la fin de ce texte.

_laurent a écrit :
Bonjour,

Je pense plutôt à l'utilisation de display:inline-block; sur tes boutons.
Si leur parent suis la largeur de l'écran les boutons tomberont naturellement les uns en dessous des autres.

Il était question du contenu du bouton, et non du bouton lui-même...