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

Layui table wählt das Optionsfeld der angegebenen Zeile aus und scrollt zum Implementierungscode der Zeile

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

Layui table wählt das Optionsfeld der angegebenen Zeile aus und scrollt zum Implementierungscode der Zeile

Führen Sie die folgenden Schritte aus, um Vue-Router in Vue3 zu verwenden

Detaillierte grafische Erläuterung der Hadoop-Installation und -Konfiguration basierend auf Linux7

react+antd.3x implementiert IP-Eingabefeld

MariaDB unter Linux startet mit dem Root-Benutzer (empfohlen)

Der Unterschied zwischen useEffect und useLayoutEffect in React

Detaillierte Beispiele zur Verwendung der Box-Shadow-Eigenschaft in CSS3

Die 6 effektivsten Möglichkeiten zum Schreiben von HTML und CSS

Serviceverwaltung der Quellpaketinstallation unter Linux

Natives JS zum Erzielen eines nahtlosen Karusselleffekts

Artikel empfehlen

JavaScript-Sandbox-Erkundung

Detaillierte Erklärung der jQuery-Methodenattribute

Lösung zum automatischen Neustart von MySQL

JavaScript implementiert einfache Rechnerfunktion

Idea stellt Remote-Docker bereit und konfiguriert die Datei

So verwenden Sie HTML-Tabellen (um den visuellen Effekt einer Webseite anzuzeigen)

Mybatis implementiert Details zum Abfangen und Ändern von SQL-Abfragen

JavaScript zur Implementierung der Login-Schiebereglerüberprüfung

Einführung in die Docker-Architektur

Anweisungen zur Verwendung der MySQL-IndexOF-Funktion

img usemap Attribut China Karte Link

So fragen Sie Datum und Uhrzeit in MySQL ab

So stoppen Sie die CSS-Animation mittendrin und behalten die Haltung bei

So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

So trennen Sie statischen und dynamischen Status durch die Kombination von Apache und Tomcat