title: Text extends outside button HTML
body: <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>