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