Teksteffekter i CSS

Et nettsted består av forskjellige typer innhold som bilder, tekst, animasjoner og mange flere. Bortsett fra å forskjønne nettstedinnholdet, kan du også kontrollere oppførselen. Dette kan gjøres ved å legge til visse effekter ved å bruke forskjellige CSS -egenskaper.

I denne guiden vil vi snakke om hvordan du kan legge til effekter på tekst som vises på nettstedet ditt.

La oss komme i gang.

Teksteffekter i CSS

Du kan legge til effekter på teksten som vises på websider ved å bruke de forskjellige egenskapene levert av CSS. CSS -egenskapene relatert til tekst er som følger.

1. Tekstoverflytegenskap
2. Skrivemodus eiendom
3. Word-Wrap-eiendom
4. ordbrytningseiendom

Nedenfor har vi diskutert hver av disse i stor dybde.

Tekstoverflytegenskap

Tekstoverflytegenskapen beskriver hva som skjer med den overfylte teksten som er usynlig for leseren. Det er ikke en frittstående egenskap og må brukes med hvitt-rom: Nowrap og Overstrøm: Hidden Properties.

Syntaks

Tekstoverflow: Klipp | ellipsis;

Klippverdien er en standardverdi som klipper den overfylte teksten, mens ellipsisverdien også klipper teksten og viser en ellipsis eller tre prikker i stedet for den overløpte teksten.

Eksempel
Dette eksemplet demonstrerer arbeidet med tekstoverflytegenskapen.

Html

Tekstoverflow: Klipp

Dette eksemplet demonstrerer klippverdien til tekstoverflytegenskapen.

Tekstoverstrømning: ellipsis

Dette eksemplet demonstrerer ellipsisverdien til tekstoverflytegenskapen.

I koden ovenfor har vi ganske enkelt opprettet to

elementer og plasserte litt lang tekst i dem for å demonstrere arbeidet med begge verdiene for tekstoverflytegenskaper.

CSS

.P1
White-Space: Nowrap;
overløp: skjult;
tekstoverflow: klipp;
Bredde: 190px;
Grense: 1px solid svart;

.P2
White-Space: Nowrap;
overløp: skjult;
tekstoverflow: ellipsis;
Bredde: 190px;
Grense: 1px solid svart;

P: Hør
overløp: synlig;

For begge avsnittene vi har satt hvitrom eiendom til Nowrap og flyte eiendom til skjult. Imidlertid den første

Element viser arbeidet med klippverdien av tekstoverflytegenskapen og den andre

Element demonstrerer ellipsisverdien til tekstoverflytegenskapen. Foruten dette hver gang bruker brukeren over avsnittet den skjulte teksten vil bli vist.

Produksjon

Den overfylte teksten blir håndtert ved hjelp av tekst-overflytegenskapen.

Skrivemodus eiendom

Denne egenskapen spesifiserer retningen til teksten som vises på websidene. Det er to mulige retninger som er enten horisontale eller vertikale.

Syntaks

Skrivemodus: Vertikal-LR | vertikal-rl | horisontal-tb | arve;

Teksten som vises vertikalt ved hjelp av vertikal-LR Verdien leses fra venstre mot høyre, vertikalt.
Teksten som vises vertikalt ved hjelp av vertikal-rl Verdien vises fra høyre til venstre, vertikalt.

I mellomtiden verdien horisontal-tb Viser teksten horisontalt fra topp til bunn.

Eksempel
Tenk på eksemplet nedenfor.

Html

Eksempel på horisontal-TB

Eksempel på vertikal-LR

Eksempel på vertikal-RL

Her har vi laget tre

elementer for å illustrere arbeidet med forskjellige skrivemodusverdier.

CSS

P
Grense: 1px solid svart;
Bredde: 200px;

.tb
skrivemodus: horisontal-TB;
Høyde: 160px;

.lr
skrivemodus: vertikal-LR;
Høyde: 160px;

.rl
skrivemodus: vertikal-RL;
Høyde: 160px;

Ved å bruke de forskjellige klassene som er tilordnet hver av

element vi setter forskjellige skrivemodus for dem.

Produksjon

Teksten er vist ved hjelp av forskjellige skrivemodus.

Word-Wrap-eiendom

Når et ord er for langt, strømmer det over det spesifiserte området til et element, men ved å bruke ordinnpakningsegenskapen som ordet er delt opp og pakket rundt neste linje.

Syntaks

Word-Wrap: Normal | Break-Word | arve;

Normalverdien deler opp ordet ved spesifiserte punkter, i mellomtiden bryter verdien de uknuselige ordene.

Eksempel
Tenk på eksemplet nedenfor for å forstå arbeidet med ordinnpakningseiendommen.

Html

Uten ordrepakk eiendom

Innholdet i dette avsnittet er
veeeeeerrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyy lOOOOOOOOOOOOOOOOOOOOOOOOONNNNNNNNNNNNNNGGGGGGGGGGGGGGGG

Med ordinnpakning: Break-Word;

Innholdet i dette avsnittet er
veeeeeerrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyy lOOOOOOOOOOOOOOOOOOOOOOOOONNNNNNNNNNNNNNGGGGGGGGGGGGGGGG

Her har vi opprettet to

elementer og plasserte noen lange ord i dem.

CSS

.P1
Bredde: 11em;
Grense: 2px solid #000000;

.P2
Bredde: 11em;
Grense: 2px solid svart;
Word-Wrap: Break-Word;

I koden ovenfor gir vi begge

elementer litt bredde og kant, og vi bruker også ordinnpakningseiendommen på den andre

element.

Produksjon

Ordinnpakningseiendommen fungerer som den skal.

ordbrytningseiendom

Ordbreakegenskapen håndterer hvordan ord skal dele seg opp på slutten av en linje.

Syntaks

Word-Break: Keep-all | Break-all | normal | arve;

Verdien for hele tiden deler seg et ord på standard måte, mens den brøt-all-verdien deler ord på tilfeldige punkter for å unngå overløp.

Eksempel
Tenk på eksemplet nedenfor for å forstå arbeidet med ordbrytningsegenskapen.

Html

ordbrudd: Keep-all;

Lære teksteffekter i CSS

ordbrudd: break-all;

LearningText -effekter i CSS

Her har vi ganske enkelt opprettet to

elementer og plasserte noe innhold i dem.

CSS

.P1
Bredde: 120px;
Grense: 2px solid #000000;
ordbrudd: Keep-all;

.P2
Bredde: 120px;
Grense: 2px solid #000000;
ordbrudd: break-all;

Første avsnitt er tildelt den hele verdien, i mellomtiden er det andre avsnittet tildelt den banebrytende verdien.

Produksjon

De forskjellige verdiene for ordbrytningsegenskaper blir bekreftet og fungerer som den skal.

Konklusjon

Du kan legge til effekter på teksten som vises på websider ved å bruke egenskapene levert av CSS, for eksempel tekstoverflytegenskaper, eiendomsmodusegenskap, eiendomsinnpakningseiendom og ordebrytende egenskap. Egenskapen for tekstoverflow beskriver hva som skjer med den overfylte teksten, egenskapen for skrivemodus spesifiserer retningen til teksten, ordre-pakkegenskaper deler opp ord og pakket rundt neste linje, og ordbrytningsegenskaper håndterer hvordan ord skal dele seg opp På slutten av en linje. Alle disse egenskapene blir forklart i dybden i denne guiden sammen med relevant