max two lines than text-overflow: ellipsis

1. offizieller Beitrag

    Hallo,

    ich habe ein div-Element mit bestimmter Breiter.
    Darin habe ich einen Text.
    Der Text darf maximal über zwei Zeilen umbrechen und danach soll dieser,
    wenn er länger ist als was auf die zwei Zeilen passt,
    abgeschnitten und mit Punkten "..." ergänzt werden (text-overflow: ellipsis).

    Wie kann ich das so mit css gestallten?

    Beispiele:
    "Lorem ipsum dolor sit"

    "Lorem ipsum dolor sit amet,
    consetetur"

    "Lorem ipsum dolor sit amet,
    consetetur sadipscing elitr,..."
    (Hier war der Text länger als das umschließende div-Element und die zwei Zeilen und er wurde abgeschnitten und mit "..." beendet.)


    Ich habe das versucht:
    https://jsfiddle.net/frankmehlhop/trmn72jc/23/
    In JSFidlle werden die Punkte angezeigt, aber in meiner App nicht. :(

    Es wäre super wenn ich Hilfe bekommen könnte.
    Frank

    5 Mal editiert, zuletzt von FrankM (16. Juli 2018 um 14:34)

    • Offizieller Beitrag

    In was für einem Browser läuft denn Deine "App"?
    Das jsfiddle setzt das line-clamp nur fü webkit-Browser, Du müsstest den Standard vielleicht noch ergänzen:

    Code
    line-clamp:2;
webkit-line-clamp:2;


    Firefox und IE ( außer Edge! ) unterstützen das im Übrigen gar nicht und im mobilen Bereich hast Du zum Firefox noch Operamini, der Dir einen Strich durch die Rechnung macht.