Beispiel für Auslassungspunkte bei Überlauf von mehrzeiligem CSS-Text

Beispiel für Auslassungspunkte bei Überlauf von mehrzeiligem CSS-Text

Auslassungspunkte werden angezeigt, wenn mehrzeiliger Text überläuft

Dieser Artikel empfiehlt zwei Methoden.

1. CSS

Tipp: Nur mit Chrome-Browsern kompatibel. ff wird nicht unterstützt.

.Kasten {
    overflow: hidden; /* Bei einem Überlauf wird der Überlaufinhalt nicht angezeigt*/
    text-overflow: Auslassungspunkte; /* Verwenden Sie stattdessen Auslassungspunkte, wenn ein Überlauf auftritt*/
    Anzeige: -webkit-box; /* Private Eigenschaften des Chrome-Browsers. Wird als Box angezeigt. */
    -webkit-box-orient: vertical; /* Elemente vertikal anordnen */
    -webkit-line-clamp: 2; /* Wie viele Zeilen sollen angezeigt werden */
}

Verlängerung

Zeilenumbruch

Schlagwörter beschreiben Standardwert Wert
Zeilenumbruch Gibt die Bedingungen für den Zeilenumbruch an normal, an Worttrennungspunkten umbrechen. Wortumbruch, Umbruch innerhalb eines Wortes.
overflow-wrap, geändert von word-wrap zu overflow-wrap in CSS3

Textüberlauf

Schlagwörter beschreiben Standardwert Wert
Test-Überlauf So zeigen Sie Text außerhalb der Box an ausschneiden, Text zuschneiden. Auslassungspunkte, zeigt Auslassungspunkte an. Zeichenfolge, zeigt den angegebenen Text an.

Leerzeichen

Schlagwörter beschreiben Standardwert Wert
Leerzeichen Wie Leerzeichen behandelt werden und ob Zeilen umbrochen werden sollen Normalerweise werden Leerzeichen vom Browser ignoriert. vor, leer lassen. nowrap, Text wird nicht umbrochen. Vorumbruch, Leerzeichen beibehalten, normal umbrechen. Vorzeile, Leerzeichen ausblenden und Zeilenumbrüche beibehalten.

Box-Orientierung

Diese Eigenschaft wird von Browsern noch nicht unterstützt. Die privaten Eigenschaften jedes Browsers müssen verwendet werden.

Schlagwörter beschreiben Standardwert Wert
Box-Orientierung So sortieren Sie untergeordnete Elemente Inline-Achse, untergeordnete Elemente entlang der Inline-Koordinatenachse (auf die horizontale Richtung abgebildet). horizontal, gibt an, dass die untergeordneten Elemente von links nach rechts in einer horizontalen Linie angeordnet sind. vertikal, ordnet untergeordnete Elemente vertikal von oben nach unten an. Blockachse, untergeordnete Elemente werden entlang der Blockachse positioniert (vertikal abgebildet). erben, erbt das übergeordnete Element.

Leitungsklemme

Nur Chrome-basierte Browser unterstützen ihre eigenen privaten Eigenschaften.

Wie viele Zeilen von Elementen auf Blockebene angezeigt werden sollen.

2.js

Es gibt viele Möglichkeiten, mit JS zu steuern, wie Überlauftext angezeigt wird. Hier ist eine empfohlene Skriptdatei: ellipsis.js

ellipsis.js

Name Link
Auslassungspunkte-Link https://www.jsdelivr.com/package/npm/ellipsis.js
Ellipse https://cdn.jsdelivr.net/npm/[email protected]/ellipsis.js
Auslassungspunkte Git https://github.com/glinford/ellipsis.js

Anwendung:

1. Skriptdateien importieren

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ellipsis.js"></script>

2. Verwendung

var ell = Auslassungspunkte({
    Zeilen: 3
})
var ele = document.getElementsByClassName('test')
ell.add(ele)

Verlängerung

Es hat auch einige Konfigurationselemente. Wenn nicht konfiguriert, wird der Standardwert verwendet.

{
    Auslassungspunkte: „…“, // Der standardmäßig anzuzeigende alternative Text. Entprellung: 0, // Die Verzögerung vor der Ausführung. Responsive: True, // Ob die Ausführung bei einer Änderung der Fenstergröße erfolgen soll. Klassenname: „.clamp“, // Die Standardaktion gilt für Elemente mit dieser Klasse.
    Zeilen: 2, // Standardmäßig werden nur 2 Zeilen mit Elementen angezeigt.
    portrait: null, // Keine Änderung standardmäßig, wenn Sie eine andere Zeilenanzahl im Portraitmodus wünschen,
    break_word: true // Wörter standardmäßig umbrechen.
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.23 unter Win10

>>:  HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)

Artikel empfehlen

Optimierte Aufzeichnung der Verwendung von IN-Datenvolumen in Mysql

Die MySQL-Versionsnummer ist 5.7.28. Tabelle A ha...

So installieren und konfigurieren Sie den Postfix-Mailserver unter CentOS 8

Postfix ist ein kostenloser und quelloffener MTA ...

So verwenden Sie Navicat zum Bedienen von MySQL

Inhaltsverzeichnis Vorwort: 1. Einführung in Navi...

Zusammenfassung der MySQL-Fremdschlüsseleinschränkungen und Tabellenbeziehungen

Inhaltsverzeichnis Fremdschlüssel So ermitteln Si...

Implementierungsideen für die Synchronisierung von Docker-Registry-Images

Einleitung Bisher wurden unsere Docker-Images in ...

Interpretation des CocosCreator-Quellcodes: Engine-Start und Hauptschleife

Inhaltsverzeichnis Vorwort Vorbereitung Gehen! Te...

So erstellen Sie ein responsives Säulendiagramm mit dem CSS-Rasterlayout

Ich spiele jetzt schon eine Weile mit Diagrammen ...

Zusammenfassung der CSS-Methoden zum Löschen von Floats

Float wird häufig im Layout von Webseiten verwend...

Beheben Sie den Fehler während der Verbindungsausnahme in Docker

Wenn Sie Docker zum ersten Mal verwenden, werden ...

Wann ist die Verwendung von dl, dt und dd sinnvoll?

dl: Definitionsliste Definitionsliste dt: Definiti...

Der Prozess der Installation von MySQL 8.0.26 auf CentOS7

1. Laden Sie zunächst die entsprechende Datenbank...

So ändern Sie die Systemsprache von CentOS7 in vereinfachtes Chinesisch

veranschaulichen Bei einer Eigeninstallation des ...