Usando o estouro de texto CSS para variar o número de linhas de texto dentro de um elemento de uma altura definida

Eu estou no fundo de algum desenvolvimento de aplicativos da web para iPhone (Safari / WebKit) no momento e quero ter itens de uma altura definida com texto de título e corpo de texto de tal forma que 3 linhas estejam sempre aparecendo. Se o texto do título for curto, duas linhas do corpo do texto devem aparecer. Se o texto do título for muito longo, ele deve ocupar no máximo duas linhas e deixar uma linha para o corpo do texto. Sempre que o texto é truncado, ele deve exibir reticências como o último caractere.

Eu vim com o seguinte que faz tudo que eu preciso, exceto que ele não exibe as reticências. Existe uma maneira de obter essa solução para satisfazer esse último requisito?

Código abaixo, conforme processado pelo Safari http://segdeha.com/assets/imgs/stack-ellipsis.png

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">

        #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;
        }

        </style>
    </head>
    <body>
        <div id="container">
            <p>
                <strong>Short title</strong>
                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.
            </p>
            <p>
                <strong>Long title that will span more 
                than 2 lines when we're done.</strong>
                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.
            </p>
        </div>
    </body>
</html>

questionAnswers(4)

yourAnswerToTheQuestion