title: Text overflow ellipsis only when content exceeds height not width limitations?
body: <p>I'm trying to figure out a way to show ellipses after text, but only when it reaches bounds of height not width, I know this can be done using <code>text-overflow: ellipsis;</code> and <code>white-space: nowrap;</code> for width restricted elements, but can't figure it out for height.</p>
  
  <p>Here is my example: <a href="https://jsfiddle.net/c7bmyc4e/1/" rel="nofollow">https://jsfiddle.net/c7bmyc4e/1/</a></p>
  
  <p>Example code:</p>
  
  <pre><code>&lt;p id="p-one"&gt;
      Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
  &lt;/p&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;p id="p-two"&gt;
      Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
  &lt;/p&gt;
  
  p{
          margin: 20px;
          background: red;
          height: 100px;
          width: 300px;
  }
  
  #p-two {
          margin: 100px 20px 20px 20px;
          padding-bottom: 20px;
          height: 100px;
          overflow-y: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
  }
  </code></pre>