title: Using CSS text-overflow to vary the number of lines of text within an element of a set height
body: <p>I'm deep into some iPhone (Safari/WebKit) web app development at the moment and want to have items of a set height with title text and body text such that 3 lines are always showing. If the title text is short, 2 lines of body text should show. If the title text is very long, it should take up a maximum of 2 lines and leave 1 line for body text. Whenever text is truncated, it should display an ellipsis as the last character.</p>
  
  <p>I've come up with the following that does everything I need, except that it does not display  the ellipsis. Is there a way to get this solution to satisfy that last requirement?</p>
  
  <p><a href="https://i.stack.imgur.com/7oyxd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7oyxd.png" alt="Code below, as rendered by Safari"></a><br>
  <sub>(source: <a href="http://segdeha.com/assets/imgs/stack-ellipsis.png" rel="nofollow noreferrer">segdeha.com</a>)</sub>  </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
  
          #container {
              width: 100px;
          }
  
          p {
  /*          white-space: nowrap; */
              font-family: Helvetica;
              font-size: 12px;
              line-height: 16px;
              text-overflow: ellipsis;
              max-height: 48px;
              overflow: hidden;
  
              border: solid 1px red;
          }
  
          strong {
  /*          white-space: nowrap; */
              font-size: 16px;
              display: block;
              text-overflow: ellipsis;
              max-height: 32px;
              overflow: hidden;
          }
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container"&gt;
              &lt;p&gt;
                  &lt;strong&gt;Short title&lt;/strong&gt;
                  This is the text description of the item. 
                  It can flow onto more than 2 lines, too, 
                  if there is room for it, but otherwise 
                  should only show 1 line.
              &lt;/p&gt;
              &lt;p&gt;
                  &lt;strong&gt;Long title that will span more 
                  than 2 lines when we're done.&lt;/strong&gt;
                  This is the text description of the item. 
                  It can flow onto more than 2 lines, too, 
                  if there is room for it, but otherwise 
                  should only show 1 line.
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>