Text extends outside button HTML

Question

https://plnkr.co/edit/dZigMtncPEed4MK75swb?p=preview

<button style="width: 50px" type = "submit">Very very very verey looooooooooooooooooooooong</button>

As you can see, the text extends outside. Is there any way to truncate the text? The reason behind this is it is that the button is part of a drop down menu.

The text is white so it might hard to see it 'breaking' the button.

[UPDATE]

Is there anyway to add margin to the text-overflow: ellipsis. The ellipsis is too close to the text and it is not appealing (in my opinion)

[UPDATE 2] Since I usually put my caret at the end of the text, the solution above cause my caret to be missing. Is there any way for me to put an ellipses follow a caret?

[UPDATE 3] Is there anyway to make the caret align at the very end?

Answer 1

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