获取按钮文本到一行 [英] Get button text on to one line

问题描述

我的按钮文本在 safari 中出现在一行上(即使在初次点击后)但是在谷歌浏览器上，当您第一次到达该按​​钮时，我的按钮将出现在一行上，但是当您浏览更多帖子并遇到加载更多按钮时文字又乱了.这只发生在谷歌浏览器上.

My button text appears on one line in safari (even after initial click) however on google chrome my button will appear on one line when you first get to the button however when you go through more posts and come across the load more button again the text is messed up. This only happens on google chrome.

当您第一次到达加载更多按钮时..

when you get to the load more button the first time..

当您第二次到达加载更多按钮时..

when you get to the load more button the second time..

这是我的 css...我试过增加宽度，虽然它解决了按钮不居中的问题

here is my css... i've tried adding in width, although it solves the issue the button is then not centered

.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 {
	display: none;
}

.elm-loading-anim {
	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;
}

推荐答案

您想尝试使用:

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

虽然 white-space: nowrap 强制按钮中的文本永不换行，但您也可以将按钮 display 设为 inline-block>，所以你不必给它一个特定的宽度.

While white-space: nowrap force the text in the button to never wrap, you can also make the button display as inline-block, so you don't have to give it a specific width.

这篇关于获取按钮文本到一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！