28172 sujets

CSS et mise en forme, CSS3

[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; Smiley murf

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 */
Modérateur
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.
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...
Modérateur
Olivier C a écrit :
Il était question du contenu du bouton, et non du bouton lui-même...

heu... non :
myself a écrit :
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.

Son premier problème de contenu il l'a résolu avec un white-space:nowrap; mais qui lui a déclenché ce second soucis. Et je ne vois pas ce que les média queries auraient changé la dedans... il aurait toujours eu le problème de contenu pour les définitions inférieure.

Mais bref, notre amis a trouvé la solution à son problème c'est le principal.

Bonne journée
Sujet clos
Aller à