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

Das Implementierungsprinzip der MySQL-Master-Slave-Synchronisation

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

Das Implementierungsprinzip der MySQL-Master-Slave-Synchronisation

JavaScript-Komposition und Vererbung erklärt

So verwenden Sie die asynchrone Anforderungs-API von Axios in Vue

Zusammenfassung gängiger Begriffe in CSS (Cascading Style Sheet)

Grundlegendes Tutorial zur Verwendung der Explain-Anweisung in MySQL

So verwalten Sie große Datei-Uploads und Breakpoint-Resumes basierend auf js

MySQL Master-Slave-Daten sind inkonsistent, Eingabeaufforderung: Slave_SQL_Running: Keine Lösung

JavaScript-Offset implementiert die Erfassung der Mauskoordinaten und das Ziehen von Modulen innerhalb des Fensters

Verwendung der MySQL SHOW STATUS-Anweisung

So erstellen Sie mit Harbor ein privates Docker-Repository

Artikel empfehlen

Eine kurze Erläuterung zum Anpassen der Hostdatei in Docker

Detaillierte Erklärung der Methoden des fs-Moduls und des Path-Moduls in Node.js

Detaillierte Analyse der untergeordneten und übergeordneten Vue-Komponenten

CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt

Detailliertes grafisches Tutorial zum Aktivieren des sicheren Remotezugriffs mit Docker

MySQL-Batch entfernt Leerzeichen in einem bestimmten Feld

MySQL effiziente Abfrage Left Join und Gruppieren nach (plus Index)

So stellen Sie LNMP und phpMyAdmin in Docker bereit

Detailliertes Beispiel zum Beheben der Tablespace-Fragmentierung in MySQL

Detaillierte Erklärung der Slots in Vue

Ubuntu 18.04 Ein-Klick-Upgrade aller Python-Pakete von Drittanbietern und Installation von Python-Paketen

Eine detaillierte Einführung in den wget-Befehl in Linux

JavaScript implementiert Farberkennung beim Überfahren der Tabellenzeile mit der Maus

Detaillierte Analyse des binlog_format-Modus und der Konfiguration in MySQL

Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen