title: Show bottom of an overflow string in a div with fixed height/width?
body: <p><strong>Background</strong></p>
  
  <p>I have a non-scrollable div with fixed width and height. 
  Here's a JSFiddle: <a href="https://jsfiddle.net/Naibaf/47fm4pvf/2/" rel="nofollow">https://jsfiddle.net/Naibaf/47fm4pvf/2/</a></p>
  
  <p><strong>Goal</strong></p>
  
  <p>I want to show as much of a bottom string were it not for the preceding string.</p>
  
  <p><strong>Reasoning and problem</strong></p>
  
  <p>Should you ask yourself: Why? I am trying to display a <a href="http://download.remysharp.com/marquee.html" rel="nofollow">news-alert-like-bar</a>, but I am concatenating the content of my div with <code>setInterval()</code> which will make it overflow quickly.</p>
  
  <p>In my judgement, jQuery's <code>.scrollTop()</code> like here: <a href="http://jsfiddle.net/2WpQf/1/" rel="nofollow">http://jsfiddle.net/2WpQf/1/</a> is ill-suited, because I want my div not to be scrollable. Same goes for CSS <code>overflow</code>.</p>
  
  <p>Does anyone know how to do this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;p&gt;How to make the bottom of a string visible within the boundaries of a div and NOT show or hide the top part?&lt;/p&gt;
  &lt;p&gt;The opposite of what I want:
  &lt;/p&gt;
  &lt;div class="hidden"&gt;You can use the overflow property when you want to have better control of the layout. The default value is visible.&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.hidden {
  background-color: #00FF00;
  width: 100px;
  height: 100px;
  overflow: hidden;
  }
  </code></pre>