Ist es möglich, eine Textlänge mit CSS auf "n" Zeilen zu beschränken (oder sie zu schneiden, wenn sie vertikal überläuft)?
text-overflow: ellipsis;
funktioniert nur für 1 Zeilentext.
Original Text:
Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Setz dich est sed! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, Magna Sagittis, Lorem Velit
gewünschte Ausgabe (2 Zeilen):
Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum ...
Antworten:
Es gibt eine Möglichkeit, dies mit der inoffiziellen Line-Clamp- Syntax zu tun. Ab Firefox 68 funktioniert dies in allen gängigen Browsern.
Wenn Sie sich nicht um IE-Benutzer kümmern, müssen Sie dies nicht tun
line-height
, undmax-height
Fallbacks.quelle
-webkit-box-orient: vertical;
, beim Kompilieren von scss versteckt zu werden, versuchen Sie dies/* autoprefixer: ignore next */ -webkit-box-orient: vertical;
Was Sie tun können, ist Folgendes:
wo
max-height:
=line-height:
×<number-of-lines>
inem
.quelle
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
, damit die Auslassungspunkte angezeigt werden. Dies funktioniert jedoch nur in Chrome. Eine Lösung, die auch unter Firefox funktioniert, finden Sie hier: stackoverflow.com/a/20595073/1884158 Und hier ist ein hilfreiches Tutorial zu diesem Thema: css-tricks.com/line-clampinBrowserübergreifende Lösung
Dieses Problem plagt uns alle seit Jahren.
Um in allen Fällen zu helfen, habe ich den CSS-only-Ansatz und einen jQuery-Ansatz für den Fall, dass die CSS-Vorbehalte ein Problem darstellen, festgelegt.
Hier ist nur ein CSS Lösung, die unter allen Umständen funktioniert, mit ein paar kleinen Einschränkungen.
Die Grundlagen sind einfach, sie verbergen den Überlauf der Spanne und legen die maximale Höhe basierend auf der von Eugene Xa vorgeschlagenen Linienhöhe fest.
Dann gibt es eine Pseudoklasse nach dem enthaltenen div, die die Auslassungspunkte schön platziert.
Vorsichtsmaßnahmen
Diese Lösung platziert immer die Auslassungspunkte, unabhängig davon, ob dies erforderlich ist.
Wenn die letzte Zeile mit einem Endsatz endet, erhalten Sie vier Punkte ....
Sie müssen mit der Ausrichtung des Textes zufrieden sein.
Die Auslassungspunkte befinden sich rechts neben dem Text, der schlampig aussehen kann.
Code + Snippet
jsfiddle
jQuery-Ansatz
Meiner Meinung nach ist dies die beste Lösung, aber nicht jeder kann JS verwenden. Grundsätzlich überprüft die jQuery jedes .text-Element. Wenn mehr Zeichen als die voreingestellte maximale Variable vorhanden sind, wird der Rest abgeschnitten und eine Ellipse hinzugefügt.
Es gibt keine Einschränkungen bei diesem Ansatz, aber dieses Codebeispiel soll nur die Grundidee demonstrieren - ich würde dies nicht in der Produktion verwenden, ohne es aus zwei Gründen zu verbessern:
1) Es wird das innere HTML von .text-Elementen neu schreiben. ob benötigt oder nicht. 2) Es wird kein Test durchgeführt, um zu überprüfen, ob das innere HTML keine verschachtelten Elemente enthält. Sie verlassen sich daher sehr darauf, dass der Autor den .text korrekt verwendet.
Bearbeitet
Danke für den Fang @markzzz
Code-Auszug
jsfiddle
quelle
Soweit ich sehen kann, wäre dies nur mit möglich
height: (some em value); overflow: hidden
und selbst dann hätte es...
am Ende keine Lust .Wenn dies keine Option ist, ist es meiner Meinung nach ohne eine serverseitige Vorverarbeitung (schwierig, da der Textfluss nicht zuverlässig vorherzusagen ist) oder jQuery (möglich, aber wahrscheinlich kompliziert) unmöglich.
quelle
.mytext
mit jQuery durchlaufen , herausfinden, ob es mehr Inhalt enthält als sichtbar ist, und einen...
manuell hinzufügen . Auf diese Weise sind Sie mit Clients ohne JS kompatibel, und Clients mit JS können die Dekoration erhalten. Vielleicht ist es eine separate Frage wert, die ein jQuery Guru beantworten muss. könnte relativ einfach möglich seinDie Lösung aus diesem Thread besteht darin, das jquery-Plugin dotdotdot zu verwenden . Keine CSS-Lösung, aber es gibt Ihnen viele Optionen für "Lesen Sie mehr" -Links, dynamische Größenänderung usw.
quelle
Der folgende CSS-Kurs half mir dabei, Auslassungspunkte mit zwei Zeilen zu erhalten.
quelle
Derzeit können Sie nicht, aber in Zukunft können Sie verwenden
text-overflow:ellipis-lastline
. Derzeit ist es mit dem Herstellerpräfix in Opera 10.60+ verfügbar: Beispielquelle
Ich habe eine Lösung, die gut funktioniert, aber stattdessen verwendet eine Ellipse einen Farbverlauf. Es funktioniert, wenn Sie dynamischen Text haben, sodass Sie nicht wissen, ob er lang genug ist, um eine Ellipse zu benötigen. Die Vorteile sind, dass Sie keine JavaScript-Berechnungen durchführen müssen. Dies funktioniert für Container mit variabler Breite, einschließlich Tabellenzellen, und ist browserübergreifend. Es verwendet ein paar zusätzliche Divs, ist aber sehr einfach zu implementieren.
Markup:
CSS:
Blogeintrag: http://salzerdesign.com/blog/?p=453
Beispielseite: http://salzerdesign.com/test/fade.html
quelle
quelle
Ich mag Line-Clamp wirklich, aber noch keine Unterstützung für Firefox. Also gehe ich mit einer mathematischen Berechnung und verstecke einfach den Überlauf
Angenommen, Sie möchten diese Klasse über jQuery mit einem Link entfernen und hinzufügen. Sie benötigen ein zusätzliches Pixel, sodass die maximale Höhe 63 Pixel beträgt. Dies liegt daran, dass Sie jedes Mal überprüfen müssen, ob die Höhe größer als ist 62px, aber im Fall von 4 Zeilen erhalten Sie ein falsches wahr, so dass ein zusätzliches Pixel dies behebt und keine zusätzlichen Probleme verursacht
Ich werde ein Coffeescript einfügen, um dies nur als Beispiel zu verwenden. Ich verwende ein paar Links, die standardmäßig ausgeblendet sind. Bei Klassen, die mehr lesen und weniger lesen, werden diejenigen entfernt, die der Überlauf nicht benötigt, und der Körper entfernt -Überlaufklassen
quelle
Wenn Sie sich auf jeden konzentrieren möchten, den
letter
Sie so machen können, beziehe ich mich auf diese FrageCode-Snippet anzeigen
Wenn Sie sich auf jedes konzentrieren möchten, können
word
Sie dies tun + LeerzeichenCode-Snippet anzeigen
Wenn Sie sich auf jeden konzentrieren möchten, können
word
Sie dies + ohne Leerzeichen tunCode-Snippet anzeigen
quelle
Grundlegender Beispielcode: Das Erlernen des Codierens ist einfach. Überprüfen Sie die Style-CSS-Kommentare.
quelle
Ich habe mich danach umgesehen, aber dann wird mir klar, verdammt, meine Website verwendet PHP !!! Warum nicht die Trimmfunktion für die Texteingabe verwenden und mit der maximalen Länge spielen?
Hier ist auch eine mögliche Lösung für diejenigen, die PHP verwenden: http://ideone.com/PsTaI
quelle