Text extends outside button HTML

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.

enter image description here

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)

enter image description here

[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?

enter image description here

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


solution

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

enter image description here