Get button text on to one line

Question

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

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

Solution 1

Would you like to try using:

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

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.

Solution 2

You can just use non-breaking space ( ) between words in your html. It's rough but works in any browser. Also better to set left and right paddings inside the button.

Comments

[user6738171]

This works except when you get to "load more posts" the second time the arrow is overlapping the last "s" in posts. So it still is making the button wonky in google chrome (the second time it appears)

[Ian.Wu]

@user6738171 As the problem is about 'Revisited', I think we can use 'btn:visited{}' to control its css after it is visited. If that doesn't work either ,I suggest you to reduce your CSSone by one .