Truncate Text in div mit dynamischer Breite und Höhe

Da ich habe sehr wenig Code ich es unten kopieren werden:Truncate Text in div mit dynamischer Breite und Höhe

<!doctype html> 

    <head> 

     <style> 

      #box{ 

       position:absolute; 
       border:2px solid #CCC; 
       width:calc(50vw - 6px); 
       height:calc(33vw + 67px); 
       overflow:hidden; 
      } 

     </style> 

    </head> 


    <body> 

     <div id = "box"> A whole lot of text </div> 

    </body> 

</html>

Wie Sie Ich habe ein div sehen (box), die dynamische Breite und Höhe hat . Ich habe den Überlauf versteckt, aber ich möchte eine Art, die letzte Zeile zu verstecken, anstatt nur die halbe Zeile anzuzeigen, in einigen Fällen.

Auch eine Ellipse wäre nett, aber ich habe versucht text-overflow: ellipsis, die nur scheint, wenn der Text nicht umschließt.

Dies ist nicht so notwendig, aber ich kann mir nicht vorstellen, warum es nicht möglich wäre.

Alles, was ich online gefunden habe, scheint mit fester Höhe zu arbeiten. Irgendeine Idee, wie ich das angehen könnte.

Quelle

2016-06-04 Greg Peckory

Ich bin wahrscheinlich völlig falsch, aber versuchen, diese CSS zum Hinzufügen:

direction: rtl;

Ich persönlich würde versuchen, es in einem Tisch setze sollte eine Tabelle, die den Textumbruch handhaben und die feste Höhe Problem, das Sie nicht festlegen möchten.

Quelle

2016-06-04 16:02:44 DMort

Kein Glück gibt es leider –

Sie haben versucht, den Text auch in eine Tabellenzelle zu schreiben? hmm .. – DMort

Wenn mehrzeilige Auslassungs Ihr Problem löst, habe ich einen Weg für Sie aus ...

.line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

PS: Browser spezifische Implementierung, nur für Chrom arbeitet ...

Quelle

2016-06-04 16:22:39 SHANK

Truncate Text in div mit dynamischer Breite und Höhe

Antwort

Verwandte Themen