Text extends outside button HTML


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


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


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