Text extends outside button HTML
Just set the width:auto;
. This happens because sometimes the text needs more than 50px. This can also be avoided by putting overflow:hidden
which will make any text exceeding the button's width disappear, giving you a perfect 50px button.
Just Use Following if you want to wrap the text inside the button
white-space:normal !important;
word-wrap:break-word;
If you want to truncate the text and add ellipsis, you could add overflow: hidden
to clip the text, and then use text-overflow: ellipsis
to add the '... ' ellipsis:
Updated Example
button.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}