Получить текст кнопки в одной строке

Текст моей кнопки отображается на одной строке в сафари (даже после первого щелчка), однако на google chrome моя кнопка появится на одной строке, когда вы впервые попадете на кнопку, однако, когда вы переходите к другим сообщениям и снова наткните на кнопку загрузки, текст перепутался. Это происходит только на Google Chrome.Получить текст кнопки в одной строке

когда вы получаете в нагрузку более кнопки в первый раз ..

когда вы получаете в нагрузку более кнопки во второй раз ..

вот мой CSS. .. Я попытался добавить ширину, хотя она решает проблему, тогда кнопка не центрируется

.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; 
 
}

источник

2016-12-20 user6738171

вы хотите попробовать использовать:

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

Хотя white-space: nowrap сила текст кнопки никогда не завернуть, и вы также можете сделать кнопку display, как inline-block, так что вы не должны дать ему определенную ширину.

источник

2016-12-20 19:49:01

Это работает, за исключением случаев, когда вы получаете «загружать больше сообщений» во второй раз, когда стрелка перекрывает последние «s» в сообщениях. Таким образом, он все еще делает кнопку wonky в google chrome (второй раз появляется) – user6738171

@ user6738171 Поскольку проблема в «Revisited», я думаю, мы можем использовать 'btn: visited {}' для управления своим css после него посещается. Если это не сработает, я предлагаю вам сократить свой CSSone на один. –

Вы можете просто использовать неразрывное пространство ( ) между словами в вашем html. Это грубо, но работает в любом браузере. Также лучше установить левую и правую прокладки внутри кнопки.

источник

2016-12-20 18:43:12

Получить текст кнопки в одной строке

ответ

Смежные вопросы