Verwenden von CSS-Textüberlauf, um die Anzahl der Textzeilen innerhalb eines Elements einer festgelegten Höhe zu ändern

Question

Jul 01, 2009, 05:38 AM

Verwenden von CSS-Textüberlauf, um die Anzahl der Textzeilen innerhalb eines Elements einer festgelegten Höhe zu ändern

Ich bin tief in die Entwicklung von iPhone (Safari / WebKit) Web-Apps vertieft und möchte Elemente mit einer festgelegten Höhe mit Titel- und Körpertext haben, sodass immer 3 Zeilen angezeigt werden. Wenn der Titeltext kurz ist, sollten 2 Textzeilen angezeigt werden. Wenn der Titeltext sehr lang ist, sollte er maximal 2 Zeilen umfassen und 1 Zeile für den Haupttext belassen. Immer wenn Text abgeschnitten wird, sollte als letztes Zeichen ein Auslassungszeichen angezeigt werden.

Ich habe mir folgendes ausgedacht, das alles macht, was ich brauche, außer dass es die Auslassungspunkte nicht anzeigt. Gibt es eine Möglichkeit, mit dieser Lösung diese letzte Anforderung zu erfüllen?

Code unten, wie von Safari dargestellt 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>