将按钮文本放在一行

Question

我的按钮文本在 safari 中显示在一行中（即使在初始点击之后）但是在 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 {
 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;
}

Answer 1

您可以只在 html 中的单词之间使用不间断 space ( )。它很粗糙，但适用于任何浏览器。最好在按钮内设置左右填充。

Answer 2

您想尝试使用：

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

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

将按钮文本放在一行

Get button text on to one line

css

wordpress

button

alignment

width