title: Cut off text in a div if it exceeds set width?
body: <p>On a website I am working on users can add a heading to a section of a page.A simple example:</p>
  
  <pre><code>M11-001 - loss of container and goods from Manchester
  </code></pre>
  
  <p>With some headings the content can be quite in-depth. In reality, for the heading at least, this content isn't always needed. The first few words would suffice to differentiate between records. </p>
  
  <p>I could just set overflow:hidden to the div and ruthlessly cut of anything outside of the set width. </p>
  
  <p>I would prefer to add ... To the end. Like so:</p>
  
  <pre><code>M11-001 - loss of container...
  </code></pre>
  
  <p>So three full-stops would be added after either X width or X characters. </p>
  
  <p>Is this possible with CSS, or maybe JavaScript?</p>