Neue Einstellungen für Text und Schriftarten in CSS3
|
Textschatten Textschatten: horizontaler Versatz, vertikaler Versatz, Unschärfefarbe Kompatibilität: IE10+
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
P{
Farbe: blau;
Textschatten: 3px 3px 3px schwarz;
}
</Stil>
</Kopf>
<Text>
<p>Dies ist ein Testtext</p>
</body>
</html>
CSS3-Zeilenumbruch Wörtertrennung: normal | alles umbrechen | alles behalten Für englischen Text: „normal“ und „keep-all“ haben dieselbe Wirkung; „break-all“ bedeutet, dass Buchstaben in Zeilen umgebrochen werden, ohne die Wirkung von Wörtern zu berücksichtigen. Für chinesischen Text: Normal und Break-All haben die gleiche Wirkung; Keep-All bedeutet Umbruch gemäß Satzzeichen
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
p{width:500px;}
span{Hintergrund:#abcdef;}
p:n-tes Kind(1){Worttrennung:normal;}
p:nth-child(2){Wortumbruch:alles umbrechen;}
p:nth-child(3){Worttrennung:alles behalten;}
p:n-tes Kind(5){Wortumbruch:normal;}
p:nth-child(6){Wortumbruch:alles umbrechen;}
p:nth-child(7){Worttrennung:alles behalten;}
</Stil>
</Kopf>
<Text>
<p><span>[word-break:normal]</span> Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</p>
<p><span>[word-break:break-all]</span> Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</p>
<p><span>[word-break:keep-all]</span> Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</p>
<hr>
<p><span>[word-break:normal]</span> Ich habe einen Traum, dass diese Nation eines Tages aufsteht und die wahre Bedeutung ihres Glaubensbekenntnisses auslebt: „Wir halten diese Wahrheiten für selbstverständlich, dass alle Menschen gleich geschaffen sind.“ Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Erben ehemaliger Sklaven und die Erben ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können. </p>
<p><span>[word-break:break-all]</span> Ich habe einen Traum, dass diese Nation eines Tages aufsteht und die wahre Bedeutung ihres Glaubensbekenntnisses auslebt: „Wir halten diese Wahrheiten für selbstverständlich, dass alle Menschen gleich geschaffen sind.“ Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Erben ehemaliger Sklaven und die Erben ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können. .</p>
<p><span>[word-break:keep-all]</span> Ich habe einen Traum, dass diese Nation eines Tages aufsteht und die wahre Bedeutung ihres Glaubensbekenntnisses auslebt: „Wir halten diese Wahrheiten für selbstverständlich, dass alle Menschen gleich geschaffen sind.“ Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Erben ehemaliger Sklaven und die Erben ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können. </p>
</body>
</html>
Zeilenumbruch für aufeinanderfolgende lange englische Wörter oder URLs (gilt nicht für Chinesisch) Zeilenumbruch: normal | Wortumbruch;
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
p{width:200px;}
span{Hintergrund:#abcdef;}
p:n-tes Kind(1){Zeilenumbruch:normal;}
p:nth-child(2){Zeilenumbruch:Worttrennung;}
</Stil>
</Kopf>
<Text>
<p><span>[Zeilenumbruch:normal]</span> <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p><span>[Zeilenumbruch:Wortumbruch]</span> <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
text-align-last So richten Sie die letzte Textzeile aus Nur IE unterstützt es, Firefox muss das Präfix -moz- hinzufügen, Google 50+ unterstützt es
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
p{width:800px;}
span{Hintergrund:#abcdef;}
p:n-tes-Kind(1){text-align-last:auto;}
p:n-tes-Kind(2){text-align-last:left;}
p:n-tes-Kind(3){text-align-last:right;}
p:n-tes-Kind(4){text-align-last:center;}
p:nth-child(5){text-align-last:justify;}
p:n-tes Kind(6){text-align-last:start;}
p:n-tes-Kind(7){text-align-last:right;}
p:n-tes Kind(8){text-align-last:initial;}
p:nth-child(9){text-align-last:inherit;}
</Stil>
</Kopf>
<Text>
<p><span>auto</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>left</span>HTML steht für Hypertext Markup Language und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>richtig</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>center</span>HTML steht für Hypertext Markup Language und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>justify</span>HTML wird Hypertext Markup Language genannt und ist eine Markierungssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>start</span>HTML steht für Hypertext Markup Language und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>Ende</span>HTML heißt Hypertext Markup Language und ist eine Markierungssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>ursprünglich</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
<p><span>erben</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </p>
</body>
</html>
text-align-last ist nur gültig, wenn text-align:justify Textüberlauf Bei der Verwendung müssen Sie das Element auf overflow:hidden; setzen. Ungültig für Chinesisch, ungültig für kurze englische Wörter, nur gültig für lange englische Wörter
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
div{width:800px;overflow:hidden;}
span{Hintergrund:#abcdef;}
div:nth-child(1){text-overflow:clip;}
div:nth-child(2){text-overflow:ellipsis;}
div:nth-child(3){text-overflow:">>";}
div:nth-child(4){text-overflow:clip;}
div:nth-child(5){text-overflow:ellipsis;}
div:nth-child(6){text-overflow:">>";}
div:nth-child(7){text-overflow:clip;}
div:nth-child(8){text-overflow:ellipsis;}
div:nth-child(9){text-overflow:">>";}
</Stil>
</Kopf>
<Text>
<div><span>clip</span>HTML heißt Hypertext Markup Language und ist eine Markierungssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </div>
<div><span>Auslassungspunkte</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </div>
<div><span>string</span>HTML wird Hypertext Markup Language genannt und ist eine Identifikationssprache. Es besteht aus einer Reihe von Tags. Mit diesen Tags lässt sich das Dokumentformat im Netzwerk vereinheitlichen und verstreute Internetressourcen zu einem logischen Ganzen verbinden. HTML-Text ist ein beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. </div>
<div><span>Clip</span>Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</div>
<div><span>Auslassungspunkte</span>Ich habe einen Traum, dass eines Tages auf den roten Hügeln Georgias die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</div>
<div><span>string</span>Ich habe einen Traum, dass eines Tages auf den roten Hügeln von Georgia die Söhne ehemaliger Sklaven und die Söhne ehemaliger Sklavenbesitzer gemeinsam am Tisch der Brüderlichkeit sitzen können.</div>
<div><span>Clip</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div><span>Auslassungspunkte</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div><span>Zeichenfolge</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
Textüberlauf:Clip; ausblenden Textüberlauf: Auslassungspunkte; Auslassungspunkte text-overflow: Zeichenfolge; gibt Zeichen an, nur in Firefox gültig
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
div{width:800px;overflow:hidden;}
span{Hintergrund:#abcdef;}
div:nth-child(1){text-overflow:clip;}
div:nth-child(2){text-overflow:ellipsis;}
div:nth-child(3){text-overflow:">>";}
div:nth-child(4){text-overflow:clip;}
div:nth-child(5){text-overflow:ellipsis;}
div:nth-child(6){text-overflow:">>";}
div:nth-child(7){text-overflow:clip;}
div:nth-child(8){text-overflow:ellipsis;}
div:nth-child(9){text-overflow:">>";}
</Stil>
</Kopf>
<Text>
<div><span>Clip</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div><span>Auslassungspunkte</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div><span>Zeichenfolge</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
Überlauf: sichtbar | versteckt | scrollen | automatisch | übernehmen Versteckten Text beim Mouseover anzeigen
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
div{width:800px;overflow:hidden;text-overflow:ellipsis;}
div:hover{Überlauf:sichtbar;}
</Stil>
</Kopf>
<Text>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
@font-face-Kompatibilität IE9+ Schriftformat TrueType .ttf keine Optimierungskompatibilität IE9+ OpenType .otf ist eine aktualisierte Version von ttf und nicht mit IE kompatibel Das beste Schriftformat für die .woff-Webversion ist das komprimierte Format TrueType/OpenType, das mit IE9+ kompatibel ist, aber nicht mit Mobiltelefonen! .eot IE-spezifisches Schriftformat Das SVG-Schriftformat ist nicht mit IE und Firefox kompatibel. Benutzerdefinierte Schriftart, generische Vorlage
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
@Schriftart{
Schriftfamilie: „meineSchriftart“;
src:url('font/myFont.eot'),/*Kompatibel mit IE9+*/
url('font/myFont.eot?#iefix') format('embedded-opentype'),/*Kompatibel mit IE6-8*/
url('font/myFont.ttf') format('truetype'),/*kompatibel mit Mobiltelefonen*/
url('font/myFont.woff') format('woff'),/*kompatibel mit allen Browsern*/
url('font/myFont.svg#myFont') format('svg');/*Für iOS entwickelt*/
}
p{font-family: 'myFont';} </style> </head> <body> <p>Dies ist meine benutzerdefinierte Schriftart~</p> </body></html>Website zum Bezug spezieller Schriftarten: https://www.fontsquirrel.com/tools/webfont-generator
Da es sich um einen ausländischen Server handelt, ist die Downloadgeschwindigkeit relativ langsam Hinweis: Ich habe persönlich festgestellt, dass die von dieser Software konvertierten Schriftformate nur die englische Version unterstützen Es wird empfohlen, andere inländische Online-Konvertierungstools oder Websites zu verwenden Schriftartdateien
<!DOCTYPE html>
<html lang="de" manifest="index.manifest">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
@Schriftart {
Schriftfamilie: „Yang Rendong Bamboo and Stone“;
src:url('myfont/Dateityp "myfont".eot'),/*Kompatibel mit IE9+*/
url('myfont/Dateiname des Quelltexts.eot?#iefix') format('embedded-opentype'),/*Kompatibel mit IE6-8*/
url('myfont/杨任东竹石体.ttf') format('truetype'),/*kompatibel mit Mobiltelefonen*/
url('myfont/Dateiname des Schriftartes.woff') format('woff'),/*Mit allen Browsern kompatibel*/
url('myfont/杨任东竹石体.svg#杨任东竹石体') format('svg');/*Für iOS entwickelt*/
}
p{font-family: 'Yang Rendong Bambus und Stein';font-size:24px;}
</Stil>
</Kopf>
<Text>
<p>HALLO, DAS IST MEINE SCHRIFTART~Dies ist meine benutzerdefinierte Schriftart~</p>
</body>
</html>
Erfolg~~~ Zusammenfassen Oben habe ich Ihnen die neuen Text- und Schrifteinstellungen in CSS3 vorgestellt. Ich hoffe, es wird Ihnen helfen! |
>>: Detaillierte Erklärung des Unterschieds zwischen Tags und Elementen in HTML
Artikel empfehlen
Lösung für SQL Server-Datenbankfehler 5123
Weil ich ein Datenbank-Tutorial habe, das auf SQL...
Serielle und parallele Operationen in JavaScript
Inhaltsverzeichnis 1. Einleitung 2. es5-Methode 3...
So implementieren Sie ein Glücksradspiel im WeChat-Applet
Ich stelle hauptsächlich vor, wie man im WeChat-A...
PostgreSQL-Materialisierte Ansichtsprozessanalyse
Dieser Artikel stellt hauptsächlich die Prozessan...
MySQL-Beispiel zum Umwandeln des Geburtsdatums in das Alter und zum Gruppieren und Zählen der Personenanzahl
Abfragen der Datenbank Wählen Sie * aus `Student`...
Schritte zum Erstellen einer Linux-Umgebung unter Windows mit VMWare (Bild und Text)
Seit ich den Mac zurückgegeben habe, liegt mein u...
jQuery realisiert den Scroll-Effekt von Tabellenzeilendaten
In diesem Artikelbeispiel wird der spezifische Co...
Linux-Grundlagen-Tutorial: Sonderberechtigungen SUID, SGID und SBIT
Vorwort Für Datei- oder Verzeichnisberechtigungen...
JavaScript-Entwurfsmuster – Muster der Verantwortungskette
Inhaltsverzeichnis Überblick Code-Implementierung...
CentOS7 64-Bit-Installation MySQL Grafik-Tutorial
Voraussetzungen für die Installation von MySQL: I...
Eine kurze Erläuterung der Unterschiede zwischen den verschiedenen Möglichkeiten zum Ausführen von .sh-Dateien in Ubuntu
Vorwort Verschiedene Methoden zur Skriptausführun...
Diagramm des Datenübertragungsprozesses beim dritten TCP-Handshake
Die Prozesspakete mit dem SYN-Flag im RFC793-Doku...
Die WeChat-Applet-Entwicklung realisiert die Aktivitätsleitfunktion für Popup-Fenster auf der Startseite
Inhaltsverzeichnis 1. Nachfrage 2. Datenbankdesig...
So ändern Sie das Passwort des Root-Benutzers in MySQL
Methode 1: Verwenden Sie den Befehl SET PASSWORD ...
So richten Sie Referer in Nginx ein, um Bilddiebstahl zu verhindern
Wenn die Bilder des Servers von anderen Websites ...