CSS overløp
Eksempel 01: Normal wrap
I vårt første eksempel vil vi diskutere bruken av normal innpakning med forskjellige skrivestiler. Så vi har brukt Visual Studio -koden for å opprette en ny HTML -fil som heter “Test.html ”og start HTML -skriptet i det. HTML -koden er startet med hoved HTML -taggen etterfulgt av hovedhodet og kroppskodene. Innenfor kroppskoden har vi brukt de to første overskriftene i forskjellige størrelser. Heading 1 er den største mens Heading 2 er den nest største som viser at dette ville være en normal innpakning.
Etter denne overskriften har vi brukt “Div” -koden for å opprette en ny seksjon på hovedholdige HTML -websiden. Denne "div" -merket er spesifisert med klassen "D1" for å bli differensiert ved styling. Vi har lagt til en tekstlinje eller avsnitt for å pakke den inn i en normal innpakningsstil. Denne teksten er enkel, og den inneholder ingen lange ord i den. Etter denne "div" -merket har vi brukt den andre overskriften på denne HTML -siden for å vise at neste Div -teksten også vil inneholde en normal omslag. Deretter har vi en ny "Div" -kode spesifisert av klassen "D2" for differensiering i styling.
Denne "div" -delen inneholder en lang tekst eller avsnitt sammen med ett langt ord i den, slik at vi kan se hvordan en normal overløpsegenskap reagerer og stil den. Etter denne delen er kroppen fullført, og kroppskoden vil være stengt sammen med hovedtaggen "HTML". Innenfor "hodet" -merket til denne HTML -koden har vi en stilkode for å style HTML -siden. Nøkkelordet “Div” har blitt brukt til å style både “Div” -seksjonene til 100 piksler med grensen på 3 piksler med “Blue Violet” -farge for hver. Bredde- og grenseegenskapen har blitt brukt her til dette formålet. Etter det har begge Div -seksjonene blitt stylet separat med bruk av klassen. Vi pakket begge sammen i den normale innpakningen ved å bruke eiendommen “Overflow-Wrap”. Stylingen er fullført. Så stil- og hodemerket er lukket her. HTML -skriptet vårt er fullført og er klart til bruk. Dermed har vi lagret den og prøvd å kjøre den på VS -koden.
Vi har brukt "Run" -menyen fra Visual Studio -koden etterfulgt av alternativet "Start feilsøking". Den har bedt om å velge nettleserkrom fra listen. Vi har utført den og har den vistede delutgangen for to “Div” -seksjoner som inneholder en normal innpakning på teksten. Den første "div" -delen har vist teksten sin i et sortert og normalt format fordi den ikke inneholder et veldig langt ord som ikke kan monteres i 100-piksler bredde.
På den annen side inneholder den andre "div" -boksen et veldig langt ord i teksten. Derfor viser utgangen at ordet krysset grensen til 100-pikselen "div" -boksen som bruk av normal innpakning. Dette er fordi normal innpakning ikke bryter ordet for å passe det i "div" -delen.
Eksempel 02: Break-Word Wrap
I dette eksemplet vil vi diskutere bruken av break-word wrap i sammenligning med den normale innpakningen. Så vi har brukt den samme HTML -koden i Visual Studio Code -verktøyet, men med få oppdateringer. Så vi starter forklaringen fra "Body" -koden. Vi har oppdatert både "Div" -merker tekstdataene med den lange setningen som inneholder ett langt ord i den. Overskriften 1 vil bli oppgitt som et normalt innpakning mens den andre overskriften i størrelse 1 er oppgitt som en "break-word" wrap.
Vi har oppdatert “Div” -seksjonsteksten for begge “Div” -seksjonene hver for seg. Kroppen er nå komplett, og vi skal se på stylingen. Den samme egenskapen til bredde og grense er blitt brukt for både “DIV” -seksjoner og klassene deres har blitt brukt til deres separate styling. Vi har spesifisert en normal innpakning for den første "div" -delen mens "break-word" -pakket for den andre "div" -delen. Vi har lagret denne koden.
Etter å ha kjørt denne oppdaterte koden i nettleseren, har vi vist-below-utgangen. Den første "div" -seksjonsteksten er å krysse grensen uten å bryte et ord mens den andre "div" -seksjonsteksten har et langt ord som har blitt brutt og flyttet til neste linje for å passe inn i "div" -ruten. Dette gjøres ved bruk av break-word wrap for styling.
Eksempel 03: hvor som helst omslag
I dette eksemplet vil vi forklare bruken av overløpsegenskapen for å anvende "hvor som helst" -pakk på "dataene våre" og sammenligne den med break-word wrap. Så innenfor kroppskoden til HTML -koden vår har vi oppdatert overskriftene. Den første overskriften i størrelse 1 er blitt oppgitt som break-word ”wrap mens den andre overskriften i samme størrelse er oppgitt som“ hvor som helst omslag ”. Begge “div” -merker inneholder teksten til oppdatert lang setning som inneholder minst 1 langt ord i den. Begge setningene i “Div” -merker er separat oppdatert for bryteord og hvor som helst vikling separat.
Innenfor stilmerket har vi igjen brukt 100-piksler bredde for begge taggene som inneholder grensen til solid "blå fiolett" farge. Etter dette har vi brukt klassene til begge tagger separat for å style dem deretter: D1 og D2. Overflyt-innpakningseiendommen har blitt brukt til både "div" separat for å style First Div med "break-word" wrap og andre "div" med "hvor som helst" wrap. La oss lagre og kjøre denne koden nå.
Utgangen fra denne oppdaterte koden har ikke vist en mindre endring i stylingen av begge "div" -seksjonene. Break-ord og hvor som helst er ganske det samme.
Konklusjon
Dette handler om styling av forskjellige elementer i en HTML-fil med egenskapen "Overflow-Wrap" for å unngå overfylling av forskjellige strengetekster av alle typer elementer i HTML-websider. Vi har sett tre veldig enkle, men nyttige HTML-eksempler separat som dekker den normale innpakningen, break-word wrap og hvor som helst omslag. Sammen med det har vi også dekket sammenligningene deres.