Wykorzystanie przepełnienia tekstem CSS do zmiany liczby linii tekstu w obrębie elementu o określonej wysokości

Question

Jul 01, 2009, 05:38 AM

Wykorzystanie przepełnienia tekstem CSS do zmiany liczby linii tekstu w obrębie elementu o określonej wysokości

Wchodzę obecnie w rozwój aplikacji internetowej na iPhone'a (Safari / WebKit) i chcę mieć elementy o ustalonej wysokości z tekstem tytułu i tekstem ciała, tak aby zawsze wyświetlały się 3 linie. Jeśli tekst tytułu jest krótki, powinny pojawić się 2 wiersze tekstu. Jeśli tekst tytułu jest bardzo długi, powinien zajmować maksymalnie 2 linie i pozostawić 1 linię na tekst. Gdy tekst jest obcięty, powinien wyświetlać wielokropek jako ostatni znak.

Wymyśliłem następujące, które robi wszystko, czego potrzebuję, z wyjątkiem tego, że nie wyświetla elipsy. Czy istnieje sposób, aby to rozwiązanie spełniało to ostatnie wymaganie?

Kod poniżej, w wersji 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>