Hvordan sette tekstavstand og plassering i CSS

Mens man skriver et dokument, må man organisere teksten ordentlig. Dette vil hjelpe brukere til å forstå strømmen av innhold og hjelpemidler ved å lese dokumentet. For å gjøre det, må det være riktige tekstjusteringer, for eksempel innrykk, ordrom, justering, retning og mer. Mer spesifikt tillater CSS oss å bruke flere egenskaper for å justere tekstavstand og plassering.

Utfallet av denne artikkelen vil være:

• Hva er tekstavstand?
• Hvordan du bruker CSS tekstavstandsegenskaper
• Hva er CSS tekstplasseringsegenskaper?
• Hvordan bruke CSS -tekstplasseringsegenskaper?

Hva er tekstavstand?

Tekstavstanden refererer til mengden plass blant den aktuelle teksten. Flere CSS -egenskaper brukes til å legge til mellomrom i teksten.

Hvordan du bruker CSS tekstavstandsegenskaper?

For å gi mellomrom i teksten, tillater CSS oss å bruke forskjellige egenskaper, som er listet opp nedenfor:

• hvitrom
• tekst-indent
• Ord-avstand
• linjehøyde
• avstand mellom bokstavene

Eksempel 1: Hvordan indent elementets tekst?

CSS “tekst-indent”Eiendom brukes til å legge innrykk til den første linjen i en tekst. For å bruke det, legg til DIV -elementet med klassen “innrykk”. Innenfor denne diven, legg til

Tag for overskriften, og

Tag for å legge til et avsnitt.

Html

CSS-tekst-indent egenskap

Tekstavstand gir et veldig pent utseende til det skriftlige innholdet.
Teksten skal brytes i håndterbare biter.

Stil “innent” div

.innrykk
Bredde: 350px;
Høyde: 200px;
tekst-indent: 40px;
Margin: Auto;
polstring: 5px;
Bakgrunnsfarge: #FFC107;
Grense: 10px Solid #9E9E9E;

Listen over CSS -egenskaper brukt på Indent Div er forklart nedenfor:

• “bredde”Eiendom brukes til innstilling av elementets bredde.
• “høyde”Eiendom brukes til å sette høyden på elementet.
• “tekst-indent”Eiendom er satt med verdien av“40px”, Som representerer 40px -plass i starten av den første linjen i et avsnitt.
• “margin”Eiendom med verdien som“bil”Genererer et lik plass rundt elementet.
• “polstring”Eiendom med verdien”5px”Legg til plassen til 5px rundt innholdet i elementet.
• “bakgrunnsfarge”Eiendom spesifiserer elementets bakgrunnsfarge.
• “grense”Eiendom med verdien som“10px solid #9e9e9e”Begynner grensebredden, grensestil og grensefarge.

Stil “h2” av “innent” div

.innrykk H2
Tekstdekorasjon: 3px understreket grått;

De

Heading Element of the Indent Div brukes “tekstdekorasjon”Eiendom med verdien”3px understreket grått" hvor i "3px”Representerer bredden på linjen,”understrek”Representerer linjen under teksten, og“grå”Er fargen.

Produksjon

Eksempel 2: Hvordan legge til hvite rom i elementet?

“CSS White-Space”Eiendom spesifiserer hvite rom i det aktuelle elementet. Denne egenskapen er basert på følgende verdier:

• normal
• Nowrap
• pre-wrap
• før
• forhåndslinje
• Breakspaces

Html

I CSS, spesifiser hvit-rom-egenskapen med verdien “forhåndslinje”:

White-Space: Pre-Line;

Produksjon

Eksempel 3: Hvordan legge til mellomrom mellom ordene?

CSS “Ord-avstand”Eiendom brukes til å spesifisere mellomrommene mellom elementets tekst. Denne egenskapen er tilknyttet følgende verdier:

• lengde
• normal
• første
• arve

Se på eksemplet!

Så i dette eksemplet vil vi legge til "Ord-avstand”Eiendom med verdien”30px”:

Ord-avstand: 30px;

Produksjon

Eksempel 4: Hvordan legge til mellomrom mellom linjene?

“linjehøyde”Eiendom brukes til å spesifisere det vertikale rommet mellom tekstlinjene.

Her i dette eksemplet brukes egenskapen til linjehøyde med verdien “3em”:

linjehøyde: 3em;

Produksjon

Eksempel 5: Hvordan legge til mellomrom mellom teksttegnene?

CSS “avstand mellom bokstavene”Eiendom brukes til å legge til mellomrommene mellom teksttegnene.

Her er elementet utstyrt med den brev-avstandsegenskapen med verdien av “-1px”I CSS:

Brevavstand: -1px;

Produksjon

Hva er Egenskaper for tekstplassering?

Tekstplassering refererer til tekstjustering. Det betyr tekstposisjonen som venstre, høyre og mange flere, i forbindelse med tekstinnsettingspunktet.

Hvordan bruke CSS -tekstplasseringsegenskaper?

Følgende er egenskapene som kan brukes til å justere tekstplasseringen.

• tekst-justering
• Tekstalign
• vertikal-align
• retning
• Unicode-Bidi

Eksempel 1: Hvordan justere den siste linjen i elementets tekst?

CSS “tekst-justering”Eiendom brukes til å justere justeringen av tekstens siste linje. I vårt tilfelle har vi satt den tekst-justerte egenskapen som "riktig":

tekst-justering: rett;

Produksjon

Eksempel 2: Hvordan justere tekst horisontalt i HTML?

CSS “Tekstalign”Eiendom brukes til å justere teksten horisontalt. For eksempel har vi satt verdien som "Ikke sant”:

Tekstalign: Rett;

Produksjon

Eksempel 3: Hvordan justere tekst vertikalt i HTML?

“vertikal-alignCSS -egenskapen brukes til å justere teksten vertikalt.

For å bruke denne eiendommen, legg til en “

”Element for å legge til et avsnitt til ønsket dokument. Dette avsnittet består av elementene på visse punkter med ID som “Superscript”:

Tekstjustering gir lesere med en visuelt
logisk tekst.

I CSS, elementet med ID “Superscript”Er stylet med følgende egenskaper:

#SuperScript
bakgrunnsfarge: RGB (3, 162, 11);
vertikal-align: super;

Her:

• “bakgrunnsfarge”Eiendom brukes til å stille inn elementets bakgrunnsfarge.
• “vertikal-align" Eiendomsverdi "super”Vil justere teksten litt vertikalt over.

Produksjon

Eksempel 4: Hvordan endre tekstretningen?

CSS “retning”Eiendom brukes til å endre elementets tekstretning.

I CSS, retningsegenskapen med verdien “rtl”Er spesifisert for å gjøre retningen på elementet til høyre til venstre:

Retning: RTL;

Produksjon

Eksempel 5: Hvordan håndtere toveis tekst i HTML?

For å håndtere den toveis teksten i et dokument, CSS “Unicode-Bidi”Eiendom brukes. Den toveis teksten refererer til dokumentet som har tekst i begge retninger, høyre til venstre og venstre til høyre. Den toveis teksten eksisterer vanligvis i dokumentet med flere språk, som kan settes ved hjelp av "retning”Eiendom.

For demonstrasjonen, legg til følgende kode i CSS -filen:

Retning: RTL;
Unicode-Bidi: Bidi-Override;

Her:

• “retning”Eiendom er satt med verdien”rtl”Som indikerer høyre til venstre retning av teksten.
• “Unicode-Bidi”Eiendom med verdien som“Bidi-override”Brukes til å spesifisere om den medfølgende teksten skal overstyres for å støtte flere språk i et dokument.

Produksjon

Det handlet om å justere tekstavstand og plassering i CSS.

Konklusjon

Mens du skriver et dokument, er det veldig nødvendig å huske på formatet og stilen til dokumentet. Et godt formatert dokument gir ingen lesbarhetsproblemer. For å gjøre det gir CSS oss forskjellige egenskaper som hjelper til med avstand og plassering av teksten i HTML. Noen av egenskapene er “Tekstalign”,“retning”,“tekst-justering", og mer. Dette innlegget har vist forskjellige CSS -egenskaper som hjelper til med innstillinger for tekstinnretting og plassering av HTML -dokumenter.