Obtenir le texte du bouton sur une ligne

Le texte de mon bouton apparaît sur une ligne dans le safari (même après un clic initial). Cependant, sur google chrome, mon bouton apparaîtra sur une ligne lorsque vous accéderez au bouton. et tombez sur le bouton de charge plus à nouveau le texte est foiré. Cela n'arrive que sur google chrome.Obtenir le texte du bouton sur une ligne

quand vous arrivez à le bouton charge plus la première fois ..

quand vous arrivez à le bouton charge plus la deuxième fois ..

ici est mon css. .. j'ai essayé d'ajouter en largeur, bien qu'il résout le problème le bouton n'est alors pas centré

.elm-wrapper { 
 
margin: 1em auto; 
 
text-align: center; 
 
} 
 

 
.elm-button { 
 
-webkit-transition: all 0.15s ease; 
 
transition: all 0.15s ease; 
 
background-color: #ffffff; 
 
text-shadow: none; 
 
    box-shadow: none; 
 
    border: none; 
 
    padding-top: 45px; 
 
    padding-bottom: 25px; 
 
font-family: 'Montserrat', sans-serif; 
 
    text-transform: uppercase; 
 
    font-size: 19px; 
 
    color: #848484; 
 
    outline: none; 
 
} 
 

 
.elm-button.ajax-inactive { 
 
display: none;  
 
} 
 
.elm-button.is-loading .elm-button-text { 
 
\t display: none; 
 
} 
 

 
.elm-loading-anim { 
 
\t display: none; 
 
} 
 

 
.elm-button.is-loading .elm-loading-anim { 
 
display: block; 
 
} 
 

 

 
.elm-loading-icon { 
 
width: 1.5em; 
 
height: 1.5em; 
 
} 
 
.elm-button:not(.is-loading)::before { 
 
      content: "v"; 
 
    font-size:11px; 
 
    float: right; 
 
    margin: 6px 0 0 16px; 
 
    font-family: 'Days One', sans-serif; 
 
}

Source

2016-12-20 user6738171

Voulez-vous essayer d'utiliser:

.btn { 
    white-space: nowrap; 
    text align: center; 
}

Alors que white-space: nowrap texte de force dans le bouton ne jamais enrouler et vous pouvez également le bouton display comme inline-block, de sorte que vous n'avez pas à lui donner une largeur spécifique.

Source

2016-12-20 19:49:01

Cela fonctionne sauf lorsque vous arrivez à "charger plus de messages" la deuxième fois que la flèche chevauche le dernier "s" dans les messages. Donc, il est encore fait le bouton fade dans google chrome (la deuxième fois il apparaît) – user6738171

@ user6738171 Comme le problème est sur 'Revisited', je pense que nous pouvons utiliser 'btn: visited {}' pour contrôler son css après est visité. Si cela ne fonctionne pas non plus, je vous suggère de réduire votre CSSone de un. –

Vous pouvez simplement utiliser un espace insécable ( ) entre les mots de votre code HTML. C'est rude mais fonctionne dans n'importe quel navigateur. Il est également préférable de régler les rembourrages gauche et droit à l'intérieur du bouton.

Source

2016-12-20 18:43:12

Obtenir le texte du bouton sur une ligne

Répondre

Questions connexes