CSS Word Wrap
I denne opplæringen vil vi gi fullstendig veiledning om denne egenskapen "Word-Wrap" og vil utføre eksempler der vi vil bruke CSS “Word-Wrap” -egenskap.
Eksempel nr. 1:
Vi skal begynne koden vår og kjøre den i Visual Studio Code. Vi starter med å lansere en ny fil og velger deretter HTML som språket. Nå, skriv "!”Og trykk“ Enter.”Her finner du alle HTML Basic Tags. Som et resultat trenger vi ikke å legge til alle disse taggene manuelt. Etter alt dette setter vi bare navnet på CSS -filen i "lenke" -merket i "hodet". Vi legger to overskrifter i kroppen og lager en div der vi skriver ett langt ord, slik at vi vil bruke "Word-wrap" -egenskapen i CSS og vil vise deg hvordan det fungerer.
Vi dekorerer overskriften ved å bruke "farge" og sette den på "Røde" ved hjelp av "tekstdekorasjon" -egenskapen og bruke nøkkelordet "understrek" for denne eiendommen. Vi bruker styling på denne overskriften for å gjøre det attraktivt. Vi pynter også den andre overskriften: "grønn" som "fargen" og bruker "tekstdekorasjonen" og sett den til "understreker". Vi setter "bredden" på "div" som "150px" og skaper en "grense" rundt den. Denne grensen handler om "3px" i sin "bredde", og det er en "solid" type "rød" i "fargen".
Her bruker vi egenskapen "Word-wrap" og setter den til "normal", som også er "standard" -verdien. Det vil ikke bryte det lange ordet. Det lange ordet vil vises slik det er skrevet i HTML -koden. Det vil krysse grensen som vi har laget for div og den lange teksten forblir den samme, den vil ikke bryte dette ordet.
Utgangen viser at det lange ordet virker det samme som vi skriver det i HTML -filen. Den krysser grensen og vises i en linje. Det lange ordet er ikke ødelagt her fordi det setter egenskapen "Word-Wrap" til "Normal" som er det samme som "standard".
Eksempel 2:
Vi bruker den samme HTML-koden, og nå skal vi bruke nøkkelordet "Break-Word" som verdien av egenskapen "Word-Wrap" i dette eksemplet.
"Fargen" for overskriften 1 "H1", bruker vi "maroon" og bruker "tekstdekorasjonen" for å understreke denne overskriften. For “H2” bruker vi “lilla” som “H2” “farge” og “understreker” overskriften også. "Bredden" på "div" -beholderen er "160px" og designer en grense rundt den ved å bruke "grensen" -egenskapen. Vi setter "3px" for divens grense "bredde" som er av den "solide" formen og "maroon" i fargen. Her er den "Word-Wrap" -egenskapen vi bruker "Break-Word" -verdien. Denne verdien vil bryte det lange ordet i henhold til det spesifiserte rommet. Vi vil se på utgangen og vil vite hvordan det lange ordet bryter ved å bruke denne egenskapen.
Legg merke til hvordan det lange ordet er ødelagt og justert inne i DIV -beholderen. Dette lange ordet er ødelagt i denne utgangen fordi vi bruker "break-word" -verdien for egenskapen "Word-wrap".
Eksempel nr. 3:
Vi har to overskrifter “H1” og “H2”. Under disse overskriftene har vi to forskjellige div med navnet “A”, og “B”. Vi skriver teksten i begge divene og legger et langt ord i hver div. Nå oppretter vi en CSS-fil der vi bruker "Word-wrap" -egenskapen.
Vi bruker egenskapen "farge" og definerer den som "grønn" for å dekorere overskriften så vel som "tekstdekorasjon" -egenskapen og nøkkelordet "understrek" for denne egenskapen "tekstdekorasjon" ". Vi bruker også "oransje" som "farge" for neste overskrift, og vi implementerer "tekstdekorasjon" med "understrek" som innstillingen. Vi setter "bredden" på "div" som "180px", som vil sette denne bredden for begge divene fordi vi ikke nevner navnet på noen div her. Vi bruker også "grensen" -egenskapen som også gjelder begge DIV -ene. "Bredden" på grensen for begge divene er "3px", "solid" type og "blå" er satt for "fargen" på grensen.
Vi nevner navnet på den første div som er “div. A ”og deretter brukes“ Word-Wrap ”-attributtet. Verdien er satt til "normal", som også er "standard" -verdien. Det lange ordet er ikke ødelagt for denne diven. Det lange ordet vises nøyaktig slik det er skrevet i HTML -kode. Nå har vi den andre div som er “Div. b ”. For dette bruker vi egenskapen "Word-Wrap" og "Break-Word" -verdien brukes. Det lange ordet vil bli ødelagt i henhold til det medfølgende rommet med denne verdien. Ved å utnytte denne egenskapen og verdien, vil vi kunne se hvordan det lange ordet deler seg i utgangen.
Det lange ordet til den første diven er ikke ødelagt fordi vi bruker "normalt" som verdien av "ordinnpakning" for "div. en". Men i den andre diven kan du se at det lange ordet også er justert i det spesifiserte rommet. Dette lange ordet som er til stede inne i den andre diven er ødelagt. Dette er på grunn av bruken av den "break-word" -verdien til egenskapen "Word-wrap".
Eksempel 4:
Vi lager overskrifter for dette eksemplet og setter to avsnitt med de forskjellige klassenavnene som "PAR" for første avsnitt og "PAR1" for andre ledd. Vi legger også et langt ord i begge avsnitt og vil bruke egenskapen "Word-wrap" i CSS.
Overskriften "farge" er satt i RGB -form. Verdien er "RGB (112, 6, 6)", som er en "rødbrun" nyanse. Vi bruker også den "algeriske" fontfamilien for "H1". Vi setter også "font-familiens" av "H2" som "Times New Roman". "Fargen" på H2 er "blåfiolett" og stil den som "kursiv" for å gjøre den attraktiv.
Nå kommer "par" som definerer første ledd. "Bredden" vi definerer her er "200px", og vi setter "bakgrunnsfargen" som "lyseblå". Vi ønsker også å skape grensen for dette, så vi bruker "grensen" og setter den til "2px solid svart". "Polstringen" vi beskriver er "10px" og størrelsen på teksten til avsnittet er "20px" for "par". Vi bruker ikke "Word-Wrap" -egenskapen for dette avsnittet.
Etter dette har vi et annet avsnitt med navnet "P1". Vi har definert "bredden" som "11em" og "bakgrunnsfargen" som "lyseblå". Vi trenger også en grense for dette, så vi bruker "grensen" og konfigurerer den til "2px solid svart."" Polstringen "vi snakker om er" 10px ". Vi bruker egenskapen "Word-Wrap" og setter den til "Word-Break" som vi har diskutert i våre tidligere koder, og størrelsen på avsnittsteksten er "20px" for "par1".
Her er det lange ordet i første ledd ikke ødelagt fordi vi ikke bruker "Word-wrap" -egenskapen for dette, det er satt som standard. Men vi bruker "Word-Wrap: Break-Word" for andre ledd, så avsnittets lange ord er ødelagt.
Konklusjon:
Hensikten med denne opplæringen er å lære deg hvordan du bruker CSS “Word-wrap” -egenskap. I denne opplæringen har vi sett på CSS “Word-wrap” -egenskap og beskrevet hva det er, hvordan du bruker den og hvordan det fungerer. Vi har forklart at denne egenskapen bryter det lange ordet og justerer dette lange ordet i det spesifiserte rommet. Vi har også vist eksempler på hvordan du bruker denne "Word-Wrap" -egenskapen, samt resultatene av alle eksemplene.