Texteffekte in CSS

Eine Website besteht aus verschiedenen Arten von Inhalten wie Bildern, Text, Animationen und vielen anderen. Neben der Verschönerung der Website -Inhalte können Sie auch sein Verhalten steuern. Dies kann durch Hinzufügen bestimmter Effekte mit verschiedenen CSS -Eigenschaften erfolgen.

In diesem Leitfaden werden wir darüber sprechen, wie Sie den Text auf Ihrer Website Effekte hinzufügen können.

Lass uns anfangen.

Texteffekte in CSS

Sie können Effekte auf den Text hinzufügen, der auf Webseiten mit den verschiedenen von CSS bereitgestellten Eigenschaften angezeigt wird. Die CSS -Eigenschaften im Zusammenhang mit Text sind wie folgt.

1. Text-Overflow-Eigenschaft
2. Schreibmoduseigenschaft
3. Word-Wrap-Eigenschaft
4. Word-Break-Eigenschaft

Im Folgenden haben wir jede dieser Tiefe besprochen.

Text-Overflow-Eigenschaft

Die text-Overflow-Eigenschaft beschreibt, was mit dem überfüllten Text passiert, der für den Leser unsichtbar ist. Es ist keine eigenständige Eigenschaft und muss mit weißem Raum verwendet werden: Nowrap und Überlauf: Hidden Eigenschaften.

Syntax

Text-Overflow: Clip | Ellipse;

Der Clip -Wert ist ein Standardwert, der den überflüssigen Text klammern, während der Ellipsis -Wert auch den Text abklimmt und eine Ellipsis oder drei Punkte anstelle des überfluteten Textes anzeigt.

Beispiel
Dieses Beispiel demonstriert die Arbeit der Text-Overflow-Eigenschaft.

Html

Text-Overflow: Clip

Dieses Beispiel zeigt den Clipwert der Text-Overflow-Eigenschaft.

Text-Overflow: Ellipsis

Dieses Beispiel demonstriert den Ellipsis-Wert der Text-Overflow-Eigenschaft.

Im obigen Code haben wir einfach zwei erstellt

Elemente und platzierte einen langen Text darin, um die Arbeit beider Werte der Text-Overflow-Eigenschaft zu demonstrieren.

CSS

.p1
weißer Raum: Nowrap;
Überlauf versteckt;
Text-Overflow: Clip;
Breite: 190px;
Grenze: 1PX Solid Black;

.p2
weißer Raum: Nowrap;
Überlauf versteckt;
Text-Overflow: Ellipsis;
Breite: 190px;
Grenze: 1PX Solid Black;

P: Hover
Überlauf: sichtbar;

Für beide Absätze haben wir das gesetzt weißer Raum Eigentum an Nowrap Und Überlauf Eigentum an versteckt. Allerdings der erste

Das Element zeigt die Funktionsweise des Clipwerts der Text-Overflow-Eigenschaft und die zweite

Das Element demonstriert den Ellipsiswert der Text-Overflow-Eigenschaft. Außerdem wird jedes Mal, wenn der Benutzer über die Absätze schwebt, der versteckte Text angezeigt.

Ausgang

Der überfüllte Text wird mit der Text-Overflow-Eigenschaft behandelt.

Schreibmoduseigenschaft

Diese Eigenschaft gibt die Richtung des auf den Webseiten angezeigten Textes an. Es gibt zwei mögliche Anweisungen, die entweder horizontal oder vertikal sind.

Syntax

Schreibmodus: vertikal-lr | vertikal-rl | Horizontal-TB | erben;

Der Text wurde vertikal mit dem angezeigt vertikal-lr Wert wird von links nach rechts, vertikal gelesen.
Der Text wurde vertikal mit dem angezeigt vertikal-rl Der Wert wird von rechts nach links vertikal angezeigt.

Inzwischen der Wert Horizontal-TB Zeigt den Text horizontal von oben nach unten an.

Beispiel
Betrachten Sie das folgende Beispiel unten.

Html

Beispiel für horizontales TB

Beispiel für vertikale LR

Beispiel für vertikal-rl

Hier haben wir drei geschaffen

Elemente, um die Arbeit verschiedener Schreibmoduswerte zu veranschaulichen.

CSS

P
Grenze: 1PX Solid Black;
Breite: 200px;

.tb
Schreibmodus: Horizontal-TB;
Höhe: 160px;

.lr
Schreibmodus: vertikal-LR;
Höhe: 160px;

.rl
Schreibmodus: vertikal-rl;
Höhe: 160px;

Verwenden der verschiedenen Klassen, die jedem der der von

Element Wir setzen verschiedene Schreibmodi für sie ein.

Ausgang

Der Text wurde mit verschiedenen Schreibmodi angezeigt.

Word-Wrap-Eigenschaft

Wenn ein Wort zu lang ist, überläuft es jedoch über den angegebenen Bereich eines Elements, indem die Wortwrap-Eigenschaft verwendet wird, wird das Wort aufgeteilt und um die nächste Zeile gewickelt.

Syntax

WORT-WRAP: Normal | Breakwort | erben;

Der Normalwert spaltet das Wort an bestimmten Punkten auf, in der Zwischenzeit bricht der Wert des Breakworts die unzerbrechlichen Wörter.

Beispiel
Betrachten Sie das folgende Beispiel, um die Arbeit der Word-Wrap-Eigenschaft zu verstehen.

Html

Ohne Word-Wrap-Eigenschaft

Der Inhalt dieses Absatzes ist
veeeeeErrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyYOOOOOOOOOOOOONNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNGGGGGGGGGGGGGG

Mit WORT-WRAP: Breakwort;

Der Inhalt dieses Absatzes ist
veeeeeErrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyYOOOOOOOOOOOOONNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNGGGGGGGGGGGGGG

Hier haben wir zwei geschaffen

Elemente und legte einige lange Wörter in sie.

CSS

.p1
Breite: 11em;
Grenze: 2PX Solid #000000;

.p2
Breite: 11em;
Grenze: 2px solide Schwarz;
WORT-WRAP: Breakwort;

Im obigen Code geben wir beide

Elemente einige Breite und Grenze und wir wenden auch die Word-Wrap-Eigenschaft auf die zweite an

Element.

Ausgang

Die Word-Wrap-Eigenschaft funktioniert ordnungsgemäß.

Word-Break-Eigenschaft

Die Word-Break-Eigenschaft übernimmt, wie Wörter am Ende einer Zeile aufgeteilt werden sollten.

Syntax

Wortausbruch: Keep-All | Break-All | Normal | erben;

Der Keep-All-Wert spaltet ein Wort in standardmäßiger Weise, während der Break-All-Wert Wörter an zufällige Punkte aufteilt, um Überlauf zu vermeiden.

Beispiel
Betrachten Sie das folgende Beispiel, um die Arbeit der Wortausbrucheigenschaft zu verstehen.

Html

Wortausbruch: Keep-All;

Texteffekte in CSS lernen

Wortausbruch: Break-All;

LearningText -Effekte in CSS

Hier haben wir einfach zwei erstellt

Elemente und platzierte Inhalte in sie.

CSS

.p1
Breite: 120px;
Grenze: 2PX Solid #000000;
Wortausbruch: Keep-All;

.p2
Breite: 120px;
Grenze: 2PX Solid #000000;
Wortausbruch: Break-All;

Dem ersten Absatz wurde der Wert des Keep-All-Werts zugewiesen. Inzwischen wurde dem zweiten Absatz der Break-All-Wert zugewiesen.

Ausgang

Die verschiedenen Werte der Wortausbrucheigenschaft werden verifiziert und funktionieren ordnungsgemäß.

Abschluss

Sie können Effekte auf den Text hinzufügen, der auf Webseiten unter Verwendung der von CSS bereitgestellten Eigenschaften wie Text-Overflow-Eigenschaft, Eigenschaft Schreibmodus, Word-Wrap-Eigenschaft und Word-Break-Eigenschaft angezeigt wird. Die text-overflow am Ende einer Linie. Alle diese Eigenschaften werden in diesem Leitfaden zusammen mit relevanten Leitfaden ausführlich erklärt