title: using text-overflow:ellipsis; only when reaching 3 lines in a div
body: <p>this is my css snippet</p>
  
  <pre><code>.test{
      width:150px;
      height:60px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
  }
  </code></pre>
  
  <p>what it does is..</p>
  
  <pre><code>the quick brown fo...
  </code></pre>
  
  <p>what i want is</p>
  
  <pre><code>the quick brown fox
  jumps over the lazy
  dog. the quick br...
  </code></pre>
  
  <p>is there anyway to do this with just CSS? or do i need to use javascript for this. If javascript is needed, anyone can teach me how? thanks!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>i tried removing the <code>white-space: nowrap;</code> and added <code>overflow-y: hidden;</code> it gives me the 3 line layout but no ellipsis</p>
  
  <pre><code>.test{
      width:150px;
      height:60px;
      overflow-y: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
  }
  </code></pre>