将按钮文本放在一行答案

【问题标题】：Get button text on to one line将按钮文本放在一行
【发布时间】：2017-05-06 01:31:07
【问题描述】：

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

【问题讨论】：

标签： css wordpress button alignment width

【解决方案1】：

您想尝试使用：

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

虽然white-space: nowrap 强制按钮中的文本永不换行，但您也可以将按钮display 设置为inline-block，因此您不必为其指定特定宽度。

【讨论】：

这有效，除非您第二次“加载更多帖子”时箭头与帖子中的最后一个“s”重叠。所以它仍然使谷歌浏览器中的按钮不稳定（第二次出现）
@user6738171 由于问题是关于'Revisited'，我认为我们可以在访问后使用'btn:visited{}'来控制它的css。如果这也不起作用，我建议您将 CSSone 减一。

【解决方案2】：

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

【讨论】：