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.
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)
[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?
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: