Beispielcode zum Teilen von Textüberlaufattributen und Textkürzungen in CSS

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zum Attribut text-overflow und zur Textkürzung in CSS vor. Ich hoffe, dass der Inhalt dieses Artikels Ihnen hilft Frontend-Entwickler können Hilfe mitbringen. Freunde, die sie benötigen, können dem Editor folgen, um gemeinsam zu lernen.

Vorwort

Dieser Artikel stellt Ihnen hauptsächlich den relevanten Inhalt des Textüberlaufattributs und der Textkürzung in CSS vor und teilt ihn mit Ihre Referenz. Schauen wir uns zum Lernen die ausführliche Einführung an:

Textüberlauf und Textkürzung

CSSer müssen sehr vertraut sein mit text-overflow. und zum Abschneiden einer einzelnen Textzeile werden die drei Codezeilen einschließlich text-overflow: ellipsis möglicherweise auch am häufigsten verwendet.

text-overflow: ellipsis;  
overflow: hidden;  
white-space: nowrap;

Dieses kleine Stück CSS ist schließlich sogar mit IE6 kompatibel, also ursprünglich nur für den IE, also den Kampf gegen Text Die Kürzung erfolgte hauptsächlich bei Firefox. Bis Firefox 7.0 haben wir die Tricks für FF beiseite gelegt und uns auf die Verwendung dieses Codes konzentriert. Natürlich kommt das Abschneiden mehrerer Zeilen immer noch nicht in Frage. In einigen Situationen mit hohen Anforderungen an die Cross-Browser-Kompatibilität benötigte das Front-End einmal das Back-End, um beim Abschneiden des Inhalts zu helfen.

Obwohl es andere Möglichkeiten gibt, mehrzeiligen Text zu kürzen, war es damals unmöglich, alles im Browserformular zu erledigen. Sie können jetzt beispielsweise das Pseudoelement :after verwenden, um das Ende mehrerer Zeilen zu positionieren und einen Farbverlaufsübergang anzuwenden, um eine Kürzung zu simulieren.

.clamp{
  height: 3 .6em;
  line-height: 1.2em;
  overflow: hidden;
  position: relative;
}
.clamp:after{
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

Die Verwendung von Farbverläufen lässt die Kürzung weniger steif erscheinen, aber ich habe sie noch nie in tatsächlichen Situationen verwendet :), da diese Methode viele Nachteile hat Ich möchte diese hässlich aussehende Methode nie anwenden. Sofern ich nicht gezwungen bin, etwas Dringendes zu tun, sage ich anderen immer im Ernst: „Ich kann das nicht“~

Wenn es nur um Webkit geht, ist der übliche Ansatz -webkit-line-clamp aktuelles Webkit Die davon dominierte mobile Version ist eine relativ gute Methode, und der Effekt ist genau das, was wir erwartet haben:

display: -webkit-box;  
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

Es ist viele Jahre her (>5 ). Aber trotzdem gibt es keinen besseren Weg, es gibt kein Attribut, das -webkit-line-clamp ersetzt, und die alte und neue Syntax können nicht gemischt werden, sodass wir weiterhin den „klassischen“ Code verwenden müssen.

-webkit-line-clamp hat ein weiteres kleines Problem, nämlich die fehlerhafte Unterstützung für Chinesisch. Im Vergleich zum perfekten Effekt auf Englisch sind bei der Verwendung von Chinesisch die drei abgeschnittenen Punkte „…“ tendenziell umständlich und es werden nur 2 Punkte oder sogar 1 Punkt angezeigt Die aktualisierte Version kann dieses kleine Problem lösen.

Wenn Text abgeschnitten wird, drücken wir ihn standardmäßig immer mit drei Punkten aus. Tatsächlich können wir diese Darstellung mit Ausnahme der oben erwähnten Pseudoelement-Simulationsmethode nicht ändern. Wenn wir jedoch auf das Textüberlaufattribut zurückblicken, wird die neue Version des Standards mehr Möglichkeiten bringen.

CSS Basic User Interface Module Level 3 befindet sich derzeit im CR-Status. Text-Overflow hat nur zwei Werte zur Auswahl: Clip oder Ellipse. Auf Level 4 im Entwurf sind die Attributwerte jedoch vorhanden sind mehr geworden:

[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}

Wir können einen -Text angeben, um die drei Punkte zu ersetzen, die beim Abschneiden zehntausend Jahre lang unverändert bleiben. Wir können den Übergang angeben und den Abstand steuern und sogar zwei A-Werte bereitstellen, um den Anfang und das Ende der Zeile gleichzeitig zu steuern ... Obwohl dies nutzlos zu sein scheint, unterstützte Firefox tatsächlich zuerst den -Wert Syntax bereits ab 9.0! Ich frage mich, ob es sein könnte, dass Firefox, nachdem es wegen Textüberlaufs kritisiert wurde, seine Vorgehensweise geändert hat und in die neueste Falle geraten ist ...

Textüberlauf ist jedoch immer noch derselbe Textüberlauf, immer noch ein einzelne Zeile, immer noch mit dem alten Partner-Leerzeichen: nowrap;, immer noch der vertraute Geschmack. Auch wenn es einige modischere Funktionen gibt, kann dies nicht über den Mangel an Mitteln zur Mehrzeilenkürzung hinwegtäuschen.

Zusammenfassung

Das obige ist der detaillierte Inhalt vonBeispielcode zum Teilen von Textüberlaufattributen und Textkürzungen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!