Efekty tekstowe w CSS

Witryna składa się z różnych rodzajów treści, takich jak obrazy, tekst, animacje i wiele innych. Oprócz upiększania treści strony, możesz również kontrolować jej zachowanie. Można to zrobić, dodając pewne efekty przy użyciu różnych właściwości CSS.

W tym przewodniku porozmawiamy o tym, jak możesz dodać efekty do tekstu pojawiającego się na Twojej stronie.

Zacznijmy.

Efekty tekstowe w CSS

Możesz dodać efekty w tekście pojawiającym się na stronach internetowych za pomocą różnych właściwości dostarczanych przez CSS. Właściwości CSS związane z tekstem są następujące.

1. właściwość tekstu
2. właściwość trybu pisania
3. właściwość Word-Wrap
4. właściwość słów

Poniżej omawialiśmy każdy z nich na głębokie.

właściwość tekstu

Właściwość tekstu z przepływem tekstu opisuje, co dzieje się z przepełnionym tekstem, który jest niewidoczny dla czytelnika. Nie jest to samodzielna właściwość i musi być używana z białą przestrzenią: nowrap i przepełnienie: ukryte właściwości.

Składnia

Text-Overflow: Clip | elipsa;

Wartość klipu jest wartością domyślną, która pokrywa przepełniony tekst, podczas gdy wartość elipsy pokrywa również tekst i pokazuje elipsę lub trzy kropki zamiast przepełnionego tekstu.

Przykład
Ten przykład pokazuje działanie właściwości tekstu napadowego.

Html

Text-Overflow: Clip

Ten przykład pokazuje wartość klipu właściwości tekstu-nadpełnienia.

Text-Overflow: Elipsis

Ten przykład pokazuje wartość elipsu właściwości tekstu.

W powyższym kodzie po prostu utworzyliśmy dwa

elementy i umieścili w nich długi tekst, aby wykazać działanie obu wartości właściwości tekstu tekstowego.

CSS

.P1
Biała przestrzeń: nowrap;
Olflow: ukryty;
Text-Overflow: Clip;
Szerokość: 190px;
granica: 1px Solid Black;

.p2
Biała przestrzeń: nowrap;
Olflow: ukryty;
Text-Overflow: Elipsis;
Szerokość: 190px;
granica: 1px Solid Black;

P: Hover
Przepełnienie: widoczne;

W obu akapitach ustawiliśmy Biała przestrzeń własność do nowrap I przelewowy własność do ukryty. Jednak pierwszy

element pokazuje działanie wartości klipu właściwości tekstu i drugiego

Element pokazuje wartość elipsy właściwości tekstowej. Oprócz tego za każdym razem, gdy użytkownik unosi się nad akapitami, zostanie wyświetlony ukryty tekst.

Wyjście

Przepełniony tekst jest obsługiwany za pomocą właściwości tekstowej.

właściwość trybu pisania

Ta właściwość określa kierunek tekstu wyświetlanego na stronach internetowych. Istnieją dwa możliwe kierunki, które są poziome lub pionowe.

Składnia

Mod pisania: Vertical-LR | pionowe-RL | poziome-tb | dziedziczyć;

Tekst wyświetlany pionowo za pomocą pionowy-lr Wartość jest odczytywana od lewej do prawej, pionowo.
Tekst wyświetlany pionowo za pomocą Pion-RL Wartość jest wyświetlana od prawej do lewej, pionowo.

Tymczasem wartość poziome-tb Wyświetla tekst w poziomie od góry do dołu.

Przykład
Rozważ przykład poniżej.

Html

Przykład poziomego TB

Przykład pionowego-LR

Przykład pionowego-RL

Tutaj stworzyliśmy trzy

elementy ilustrujące działanie różnych wartości w trybie pisania.

CSS

P
granica: 1px Solid Black;
szerokość: 200px;

.TB
tryb pisania: poziome-tb;
Wysokość: 160px;

.LR
tryb pisania: Vertical-LR;
Wysokość: 160px;

.RL
tryb pisania: Vertical-RL;
Wysokość: 160px;

Korzystanie z różnych klas przypisanych do każdego z

element ustawiamy dla nich różne tryby pisania.

Wyjście

Tekst został wyświetlony przy użyciu różnych trybów pisania.

właściwość Word-Wrap

Kiedy słowo jest zbyt długie, przepełnia się poza określonym obszarem elementu, używając właściwości Word-Wrap, słowo jest podzielone i owinięte wokół następnego wiersza.

Składnia

Word-Wrap: Normal | Break-słowo | dziedziczyć;

Wartość normalna dzieli słowo w określonych punktach, tymczasem wartość łamania słów rozbija niezniszczalne słowa.

Przykład
Rozważ poniższy przykład, aby zrozumieć działanie właściwości Word-Wrap.

Html

Bez właściwości Word-Wrap

Treść tego akapitu jest
veeeeeerrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyy looooooooooooooooooooonnnnnnnnnnnnggggggggggggggggg

Z winy słów: łamanie słów;

Treść tego akapitu jest
veeeeeerrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyy looooooooooooooooooooonnnnnnnnnnnnggggggggggggggggg

Tutaj stworzyliśmy dwa

Elementy i umieściły w nich kilka długich słów.

CSS

.P1
Szerokość: 11em;
granica: 2px solid #000000;

.p2
Szerokość: 11em;
Border: 2px Solid Black;
Word-Wrap: Break-Word;

W powyższym kodzie podajemy zarówno

elementy pewne szerokość i granica, a także stosujemy właściwość Word-Wrap w drugim

element.

Wyjście

Właściwość Word-Wrap działa poprawnie.

właściwość słów

Właściwość słownego łamania radzi sobie z tym, jak słowa powinny się podzielić na końcu linii.

Składnia

Word-Break: Keep-All | Break-all | Normalne | dziedziczyć;

Wartość utrzymywania wszystkich słów dzieli słowo w sposób domyślny, podczas gdy wartość przerwania wszystko dzieli słowa w losowych punktach, aby uniknąć przepełnienia.

Przykład
Rozważ poniższy przykład, aby zrozumieć działanie właściwości słowem.

Html

Word-Break: Keep-All;

Uczenie się efektów tekstowych w CSS

Word-Break: Break-All;

Uczenia się efekty tekstu w CSS

Tutaj po prostu stworzyliśmy dwa

elementy i umieścili w nich trochę treści.

CSS

.P1
szerokość: 120px;
granica: 2px solid #000000;
Word-Break: Keep-All;

.p2
szerokość: 120px;
granica: 2px solid #000000;
Word-Break: Break-All;

Pierwszy akapit przypisano wartość utrzymania, tymczasem drugim akapit.

Wyjście

Różne wartości właściwości słownej są weryfikowane i działają poprawnie.

Wniosek

Możesz dodać efekty w tekście pojawiającym się na stronach internetowych za pomocą właściwości dostarczanych przez CSS, takich jak właściwość tekstu, właściwość w trybie pisania, właściwość Word-Wrap i właściwość Word-Break. Własność tekstu tekstu opisuje, co dzieje się z przepełnionym tekstem, właściwość trybu pisania określa kierunek tekstu, właściwość Word-Paper dzieli słowa i owinięta wokół następnego wiersza, a właściwość słowem obsługuje, w jaki sposób słowa powinny się podzielić Na końcu linii. Wszystkie te właściwości są szczegółowo wyjaśnione w tym przewodniku wraz z odpowiednimi