Uso del desbordamiento de texto CSS para variar el número de líneas de texto dentro de un elemento de una altura establecida

Question

Jul 01, 2009, 05:38 AM

Uso del desbordamiento de texto CSS para variar el número de líneas de texto dentro de un elemento de una altura establecida

Estoy profundamente involucrado en el desarrollo de aplicaciones web de iPhone (Safari / WebKit) en este momento y quiero tener elementos de una altura determinada con texto de título y texto de cuerpo tal que siempre aparezcan 3 líneas. Si el texto del título es corto, deben aparecer 2 líneas de texto del cuerpo. Si el texto del título es muy largo, debería ocupar un máximo de 2 líneas y dejar 1 línea para el texto del cuerpo. Cada vez que se trunca el texto, debe mostrar una elipsis como el último carácter.

Se me ocurrió lo siguiente que hace todo lo que necesito, excepto que no muestra los puntos suspensivos. ¿Hay alguna manera de obtener esta solución para satisfacer ese último requisito?

Código a continuación, tal como lo muestra 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>