CSS Text-Überlauf verwenden, um die Anzahl von Textzeilen innerhalb eines Elements eines Satzes Höhe

Ich bin tief in einigen iPhone (Safari/WebKit) Web-App-Entwicklung zur Zeit zu variieren und wollen Elemente eines Satzes Höhe haben mit Titeltext und Fließtext, so dass immer 3 Zeilen angezeigt werden. Wenn der Titeltext kurz ist, sollten 2 Zeilen Fließtext angezeigt werden. Wenn der Titeltext sehr lang ist, sollte er maximal 2 Zeilen umfassen und 1 Zeile für Fließtext lassen. Wenn Text abgeschnitten wird, sollte eine Ellipse als letztes Zeichen angezeigt werden.CSS Text-Überlauf verwenden, um die Anzahl von Textzeilen innerhalb eines Elements eines Satzes Höhe

Ich habe mit dem folgenden kommen, die alles tut, ich brauche, außer, dass es nicht auf die Ellipsen nicht angezeigt. Gibt es eine Möglichkeit, diese Lösung zu finden, um diese letzte Anforderung zu erfüllen?

Code below, as rendered by 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>

Quelle

2009-07-01 Andrew Hedges

Ich schaute auf http://iphone.facebook.com in Safari (Spoofing der iPhone User Agent) und es sieht aus wie sie diese Server-Seite tun. Ich vermute, dass ich zum gleichen Schicksal verdammt bin. –

Ich wollte in der Vergangenheit etwas Ähnliches machen. Ich habe am Ende versucht, die Zeilen zu teilen und die Server-Seite Ellipse hinzuzufügen. Das brachte mich dazu, zu wissen, wie groß und groß der Text wäre (in Pixel). Schließlich gab ich frustriert auf. –

Ist JavaScript nicht in Frage? – peteorpeter

Eine Lösung für dieses Problem ist, den Text zu verblassen, anstatt ein Auslassungszeichen hinzuzufügen. Wenn dies für Sie eine akzeptable Alternative ist, lesen Sie bitte weiter.

Da die Zeilenhöhe auf 16px festgelegt ist, können Sie ein einfaches png-Bild mit einem Farbverlauf (oder einem CSS3-Farbverlauf) verwenden, das von Transparent zur entsprechenden Hintergrundfarbe geht und es in der unteren rechten Ecke des Absatzes positioniert.

Das gleiche gilt für die Überschrift, wenn Sie das Verlaufsbild 16px von oben positionieren, so dass es nur sichtbar ist, wenn die Überschrift zwei Zeilen erreicht (dank Überlauf ausgeblendet).

Quelle

2012-06-07 00:08:14

Sie können die Schriftgröße angeben (font-size) in diesem Bereich verwendet werden, dann fix die height und width des Feldes (denn jetzt wissen Sie, wie viele Zeilen von font-size Größe passen), und verwenden Sie dann die overflow Eigenschaft (nicht text-overflow)

Quelle

2012-06-07 00:29:55 Eugene

Versuchen Sie dieses: jsfiddle.net/7BXtr/. Es verwendet nur CSS (kein JavaScript).

Grundsätzlich hat der Text overflow: hidden angewendet, und ... ist nach ihm positioniert.

Nachteile:

Auslassungspunkte werden immer nach der Beschreibung erscheinen, auch wenn es kurz ist.
Die Ellipsen erscheinen immer an den gleichen Positionen auf der rechten Seite.

Quelle

2012-06-20 02:31:12

Problem ist, die Ellipsen werden immer eingefügt, auch wenn der Text zu kurz ist .. – leopic

@LEOPiC Ich weiß, es ist nur ein hacky Weg, um es fast dort zu bekommen. –

Ich weiß, das eine Antwort zu spät ist. Aber für andere auf der Suche nach dem gleichen Problem: Ich entwickle mich auf Magnus Magnusson Antwort.

einen durchscheinende Schatten erstellen, können Sie die box-shadow-Eigenschaft verwenden können, die verwendet werden können, einen inneren Schatten-Effekt zu erzeugen.

Quelle

2014-09-24 01:50:39 UKM

CSS Text-Überlauf verwenden, um die Anzahl von Textzeilen innerhalb eines Elements eines Satzes Höhe

Antwort

Verwandte Themen