Eine kurze Analyse von CSS3 mithilfe von Textüberlauf zur Lösung von Textlayoutproblemen

Grundlegende Syntax
Die Verwendung von Text-Overflow erfordert die Verwendung von drei Attributen: hight, over-flow:hidden; white-space:nowrap;

Textüberlauf: Clip; Auslassungspunkte; Zeichenfolge
Clip: Direkt ausblenden ohne anzuzeigen
Ellipse: Verwenden Sie drei Punkte, um überlaufenden Text anzuzeigen (häufig verwendet)
Zeichenfolge: Sie können Symbole anpassen, um Zeichen darzustellen, die nicht platziert werden können

<!DOCTYPE html>
<html lang="de">
<Kopf>
	<meta charset="UTF-8">
	<Titel></Titel>
	<style type="text/css">
		.tf{
			Breite: 100px;
			Höhe: 50px;
			Rand: 1px, durchgehend schwarz;
			Überlauf: versteckt;
			text-overflow: clip;/*Wenn Sie nur den Text ausblenden möchten, spielt es keine Rolle, ob Sie diesen Satz hinzufügen oder nicht. height+overflow kann den überlaufenden Text direkt ausblenden*/
		}
		.tf1{
			Breite: 100px;
			Rand: 1px, durchgehend schwarz;
			Überlauf: versteckt;
			Textüberlauf: Auslassungspunkte;
			-webkit-text-overflow: Auslassungspunkte;
			Leerzeichen: Nowrap;
			/*Bei Verwendung des Auslassungsattributs text-overflow:ellipsis; overflow: hidden;white-space: nowrap;
			 Diese drei Eigenschaften sind unverzichtbar */
		}
	</Stil>
</Kopf>
<Text>
	<div Klasse="tf">
		123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM.
	</div>

	<div Klasse="tf1">
		123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM.
	</div>

	
</body>
</html>

Damit endet dieser Artikel mit einer kurzen Analyse, wie CSS3 Textüberlauf verwendet, um Textsatzprobleme zu lösen. Weitere relevante CSS3-Textsatzinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Kombinieren von XML- und CSS-Stilen

>>: Erfahren Sie mehr über die am häufigsten verwendeten JavaScript-Ereignisse

Detaillierte Erläuterung des Datenproxys und der Ereignisse von VUE

Wenn div auf contentEditable=true gesetzt ist, kann der Cursor nach dem Zurücksetzen seines Inhalts nicht positioniert werden

Artikel

Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1

Artikel empfehlen

20 CSS-Codierungstipps für mehr Effizienz (sortiert)

In diesem Artikel möchten wir eine Sammlung von 2...

Das adaptive CSS-Layout realisiert die Gesamtzentrierung von Unterelementelementen und die Linksausrichtung von internen Elementen

Bei der täglichen Arbeit stoßen wir möglicherweis...

Eine kurze Analyse von CSS3 mithilfe von Textüberlauf zur Lösung von Textlayoutproblemen

Detaillierte Erläuterung des Datenproxys und der Ereignisse von VUE

Die Lösung für das Problem, dass die Webtabelle oder die Div-Ebene in der Webseite gestreckt ist

Implementierung der Breakpoint-Wiederaufnahme im Vue-Video-Player

So installieren Sie die MySQL-Server-Community-Version MySQL 5.7.22 winx64 in win10

So verwenden Sie js zur Kommunikation zwischen zwei HTML-Fenstern

Wenn div auf contentEditable=true gesetzt ist, kann der Cursor nach dem Zurücksetzen seines Inhalts nicht positioniert werden

Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1

CSS-Standard: Eigenschaft „vertical-align“

Detaillierte Erläuterung der Anwendungsszenarien von Filtern in Vue

Zusammenfassung verschiedener Übermittlungsmethoden für HTML-Formulare

Artikel empfehlen

20 CSS-Codierungstipps für mehr Effizienz (sortiert)

Das adaptive CSS-Layout realisiert die Gesamtzentrierung von Unterelementelementen und die Linksausrichtung von internen Elementen

Anweisungen zur Verwendung des Meta-Viewport-Tags (Zoom-Steuerung beim mobilen Surfen)

So fragen Sie ab, ob die MySQL-Tabelle gesperrt ist

So verwenden Sie mysqldump für vollständige und zeitpunktbezogene Sicherungen

JavaScript-Singleton-Modus zum Implementieren benutzerdefinierter Popup-Fenster

Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

Zusammenfassung der MySQL-Zeitstatistikmethoden

Kopieren von Node.js-Dateien, Erstellen von Ordnern und andere damit verbundene Vorgänge

Empfehlen Sie einige nützliche Lernmaterialien für Neulinge im Webdesign

So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)

So zeigen Sie den Rahmen an, wenn td leer ist

Manuelle Implementierung der Instanceof-Methode in JavaScript

jQuery-Plugin zum Implementieren eines schwebenden Menüs

Diagramm des Tomcat CentOS-Installationsprozesses