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
Textüberlauf
Leerzeichen
Box-Orientierung Diese Eigenschaft wird von Browsern noch nicht unterstützt. Die privaten Eigenschaften jedes Browsers müssen verwendet werden.
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
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)
Inhaltsverzeichnis 1. Ternäres Operatorurteil 2. ...
Vorwort Es gibt ein Szenario, in dem das Unterneh...
Inhaltsverzeichnis 1. for-Schleife: grundlegend u...
1. Einleitung Ich werde hier nicht näher auf Apol...
Vor einiger Zeit stieß ich auf das Problem, dass ...
Vor Kurzem habe ich mit shake.js eine ähnliche Fu...
Verwendung des Plugins „Veröffentlichen über SSH“...
Inhaltsverzeichnis 1. Nachfrage 2. Wirkung 3. All...
In diesem Artikel wird der spezifische JavaScript...
Inhaltsverzeichnis Bei der Entwicklung kann eine ...
In diesem Artikel finden Sie den spezifischen Cod...
1. MacVlan Es gibt viele Lösungen, um eine netzwe...
Dieser Artikel veranschaulicht anhand von Beispie...
Inhaltsverzeichnis Zusammenfassung Einfaches Beis...
Vorwort Dieser Artikel stellt hauptsächlich die L...