CSS Multi-Line Ellipse Cross-Browser
Es ist ein "div" in meine Webseite hat eine Feste Breite und Höhe.
Folgenden css funktioniert nur mit single line text:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Wie kann ich mich bewerben Ellipse auf multiline-text auf den text in das div mit reinem css mit cross-browser-Kompatibilität?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen Sie dieses Beispiel:
http://codepen.io/martinwolf/pen/qlFdp
oder gehen Sie für dotdotdot.js
Schlechten nicht die CSS-Unterstützung, cross-browser-multiline-Klemmung, nur WebKit zu sein scheint, drücken Sie es. Alle anderen hacky-Lösungen nicht wirklich Wert scheint es im moment denn auch Sie haben Ihre eigenen Probleme.
Weiß ich, wie Sie möchten reinem CSS und haben wahrscheinlich Ihre eigenen Javascript-alternative Optionen, aber Sie könnten versuchen, und verwenden Sie einen einfachen Javascript-Ellipse-Bibliothek, wie Ellipsity auf github den source-code ist sehr sauber und klein, so dass, wenn Sie brauchen, um zusätzliche änderungen sollte es ganz einfach.
https://github.com/Xela101/Ellipsity
Ich bin wirklich zu wollen, eine Reine CSS-Lösung, um auch diese Dinge zu beschleunigen und machen alles schauen mehr schön, ohne die Notwendigkeit von externen Abhängigkeiten.
Diese Problemumgehung erfordert eine umlaufende element und hat eine kleine Einschränkung der Deckung, die ganz am Ende von deinem text, wenn er genau füllt Ihr Inhalt-box, aber es funktioniert gut genug Flüssigkeit in Situationen, bis eine bessere css-Eigenschaft (wie die line-Klemme) ist weitgehend umgesetzt.
Funktioniert am besten mit
text-align:justified
, aber nicht notwendig.https://codepen.io/freer4/pen/prKLPy
CSS:
HTML:
JS:
CSS:
HTML:
$(.ellipsis - 2)
bit ist problematisch, kann Sie brauchen quot Markierungen vorhanden). Bitte auch kommentieren Sie Ihren code, da Sie es ist groß und es ist nicht ganz klar, ob es notwendig ist, für diese Aufgabe. Beste GrüßeKönnten Sie lösen es mit einigen nach pseudo-Klassen. Als
text-overflow: ellipsis
nicht machen die gleichen cross-browser-wir sind das hinzufügen Ellipse mit dem content-Attribut, die Sie bereitstellen können, um die:after
Klasse. Wenn wir setzenwhite-space: nowrap
zu denp
müssen wir hinzufügen, diediv:after
"hack", um sicherzustellen, dass der text abgeschnitten wird, wo die Polsterung setzt in.HTML:
CSS
JSFiddle
Bearbeiten
Kann ich sehen, dass ich vielleicht falsch verstanden, deine Frage ein bisschen. Mein code wird fix Cross-browser-Ellipse-rendering aber nicht für multi-line-text. Überprüfen Sie heraus diesen Pfosten für mehr Antworten auf Ihr spezifisches Thema: Begrenzung Textlänge von n Zeilen mit CSS: Stack Overflow