title: function to shorten a text dynamically inside span
body: <p>i have a span like this.</p>
  
  <pre><code>css:
  .menu {border:1px solid #000; width:200px; display:block; padding:3px;}
  
  html:
  &lt;span class="menu"&gt;This is an example text&lt;/span&gt;
  &lt;span class="menu"&gt;Another text example&lt;/span&gt;
  </code></pre>
  
  <p>It prints this.</p>
  
  <p><img src="https://i.stack.imgur.com/ao7X3.png" alt="enter image description here"></p>
  
  <p>i have set the "span width" to 200px, because of the text is longer then 200px, so the span is resized to more than 200px.</p>
  
  <p>I need a javascript or jQuery function so it'll print something like this. It also add "..." in the end of the text.</p>
  
  <p><img src="https://i.stack.imgur.com/Q4L7N.png" alt="enter image description here"></p>
  
  <p>A css style would also be accepted...</p>