title: How can I access the actual text that is displayed in a DIV when using CSS style overflow: hidden?
body: <p>I have the following content DIV on my page, which displays dynamic text:</p>
  
  <pre><code>&lt;div id="someContent"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It uses the following CSS to cut off additional text:</p>
  
  <pre><code>#someContent {
      height: 200px;
      width: 200px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>If I load this text into the DIV:</p>
  
  <blockquote>
    <p><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at
    nonummy quam  ante ac quam. Maecenas urna purus, fermentum id,
    molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus.
    Quisque ornare risus quis  ligula. Phasellus tristique purus a augue
    condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus
    venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien
    vehicula nonummy. Suspendisse potenti."</em></p>
  </blockquote>
  
  <p>...the CSS causes only the following text to display in the DIV:</p>
  
  <blockquote>
    <p><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at
    nonummy quam  ante ac quam. Maecenas urna purus, fermentum id,
    molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus.
    Quisque ornare risus quis  ligula. Phasellus tristique purus a augue"</em></p>
  </blockquote>
  
  <p>This works as expected.</p>
  
  <p>However, I was wondering if there is some way that I can access the displayed text using JavaScript. When I try to access the <code>innerHTML</code> property of the DIV, it returns the entire text originally loaded into the DIV.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      alert(document.getElementById("mainArticleContent").innerHTML);
  &lt;/script&gt;
  </code></pre>
  
  <p>My end goal is to replace the last word in the <em>trimmed</em> content with ellipsis ("..."). I figured I could do this in JavaScript so that it will display in all browsers, not just IE, as with CSS property <code>text-overflow: hidden</code>.</p>
  
  <p>Any ideas? Is this possible? </p>