Text extends outside button HTML
<p><a href="https://plnkr.co/edit/dZigMtncPEed4MK75swb?p=preview" rel="noreferrer">https://plnkr.co/edit/dZigMtncPEed4MK75swb?p=preview</a></p>

<pre><code>&lt;button style="width: 50px" type = "submit"&gt;Very very very verey looooooooooooooooooooooong&lt;/button&gt;
</code></pre>

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

<p><a href="https://i.stack.imgur.com/FvQPA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FvQPA.png" alt="enter image description here"></a></p>

<p>The text is white so it might hard to see it 'breaking' the button.</p>

<p>[UPDATE]</p>

<p>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)</p>

<p><a href="https://i.stack.imgur.com/yaAmj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yaAmj.png" alt="enter image description here"></a></p>

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

<p><a href="https://i.stack.imgur.com/YtME5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YtME5.png" alt="enter image description here"></a></p>

<p>[UPDATE 3]
Is there anyway to make the caret align at the very end?
<a href="https://i.stack.imgur.com/gAQ32.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gAQ32.png" alt="enter image description here"></a></p>