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
Centos7 implementiert Beispielcode zum Wiederherstellen von Daten basierend auf MySQL-Protokollen
Einführung Binlog-Protokolle, also binäre Protoko...
4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen
1. Float + Überlauf: versteckt Diese Methode löst...
Häufige Linux-Fehler bei der chinesischen Übersetzung (Neulinge müssen das wissen)
1.Befehl nicht gefunden Befehl nicht gefunden 2. ...
Docker-Installation und Bereitstellung einer Analyse des Net Core-Implementierungsprozesses
1. Docker-Installation und -Einstellungen #Instal...
Detaillierte Erläuterung der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten in Vue3
Inhaltsverzeichnis Erste Methode App.vue Startsei...
Zusammenfassung aller HTML-Interviewfragen
1. Die Rolle des Doctypes, der Unterschied zwisch...
CentOS7-Installations-Tutorial für Zabbix 4.0 (Abbildung und Text)
Deaktivieren Sie SeLinux setenforce 0 Dauerhaft g...
Neun erweiterte Methoden zur Deduplizierung von JS-Arrays (erprobt und effektiv)
Vorwort Die allgemeinen Methoden sind hier nicht ...
JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen
1. Warum diesen Artikel schreiben? Sie haben sich...
Leistung des Node+Express-Testservers
Inhaltsverzeichnis 1 Testumgebung 1.1 Server-Hard...
JavaScript-Programmierung durch Lernen der Positionierung des Schwerpunktalgorithmus in Matlab
Inhaltsverzeichnis Matlab-Centroid-Algorithmus Da...
Tabelle zeigt den Grenzcode, den Sie anzeigen möchten
Gemeinsame Eigenschaften von Tabellen Die grundle...
Eine kurze Diskussion über die drei Hauptprobleme von JS: Asynchronität und Single-Thread
Inhaltsverzeichnis Einzelner Thread asynchron Ein...
Implementierung des Element-UI-Layouts (Zeilen- und Spaltenkomponenten)
Inhaltsverzeichnis Grundlegende Anweisungen und V...
Zwei Möglichkeiten zum Exportieren von CSV in Win10 MySQL
Es gibt zwei Möglichkeiten, CSV in Win10 zu expor...