title: CSS: How to limit text shown with using "..."
body: <blockquote>
    <p><strong>Possible Duplicates:</strong><br>
    <a href="https://stackoverflow.com/questions/2995656/is-it-possible-to-implement-the-effect-of-overflowellipsis-with-javascript-or-cs">Is it possible to implement the effect of overflow:ellipsis with javascript or css?</a><br>
    <a href="https://stackoverflow.com/questions/2108740/how-do-i-indicate-long-text-into-a-smaller-fixed-column-with-css">How do I indicate long text into a smaller fixed column with CSS?</a>  </p>
  </blockquote>
  
  
  
  <p>I want to trim text if it's greater than 300px wide with "..."</p>
  
  <p>For example, if I had:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;this is greater than 300px, than only display as much of the text that is 300px wide and then replace the remaining text with "..."&lt;/li&gt;
  &lt;li&gt;short, don't trim&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Would display as:</p>
  
  <pre><code>this is greater than 300px, than only ...
  short, don't trim
  |----------- 300px wide ----------------|
  </code></pre>
  
  <p>How would I do that with CSS/HTML?</p>