Et Cascading Style Sheet (CSS) tilbyr en eiendom for å vise alle HTML -elementene uten noen pause, eller du kan si at alt HTML -innholdet vises på en enkelt linje. HTML og CSS bidrar begge til å oppnå dette fenomenet på websiden. Den grunnleggende fordelen med å gjøre dette er at HTML -innholdet vil ta mindre plass når de vises. Det gjør også innholdet på linje.

Det er ingen innebygd funksjon i CSS som de andre effektene, for eksempel tekstdekorasjon, listestiltype osv. Men vi må anvende denne ikke-linjen-bruddseffekten ved å bruke en displayegenskap som er verdsatt som en inline-block-egenskap.

For å implementere CSS No-Line Break Property Effect, må du vite det grunnleggende om HTML og CSS. Vi vil bruke en tekstredigerer for koden og en nettleser for å implementere koden i redaktøren. La oss utdype CSS-egenskapen til inline-block og dens effekter på "ingen linjepause" -fenomen.

CSS inline-block-eiendom

Denne egenskapen brukes til å vise et element i inline-block-beholderen. I denne tilnærmingen konverteres blokken til inline -elementet. Ved å gjøre dette er det forebygging av linjepausen. Syntaksen til den inline-block-egenskapen vises i følgende:

Element
Display: Inline-block;

Vi vil implementere denne egenskapen på to måter: gjennom listen og Div.

Eksempel 1: Ingen linjepause i lister

I det første eksemplet vil vi bruke No-Line Break-konseptet på listen. En liste er et HTML -innhold der teksten er representert vertikalt sammen med kulene, enten er listen bestilt eller uordnet. Når vi snakker om lister, kommer vi alltid med utsikten over å ha hvert element på listen i en egen linje med en linjepause. Men noen ganger, i henhold til scenariet, ønsker vi å vise listeelementene uten kuler i en enkelt linje. Dette gjøres ved å vise listeelementene ved hjelp av CSS med egenskapen "No Line Break". La oss starte HTML -koden med kroppsseksjonen.

Vi brukte to overskrifter på teksten gjennom overskriftskodene -

og

. Etter det opprettes den uordnede listen med 5 elementer i hver rad.

• Datanettverk


• ..

Den samme syntaks følges for at de 5 elementene skal legges inn i hver rad.

Etter det, Tag lukker listen og lukker også resten av taggene på samme måte. Vurder nå stilmerker som vi trenger å bruke visningsegenskapen på listen slik at hvert listeelement vises på en enkelt linje.

Li
Display: Inline-block;

Vi bruker "Li" -merket direkte i CSS for å bruke inline-block-effekten på alle listeelementene og forhindre at de vises på en egen linje. Videre bruker vi skriftfargen på begge overskriftene. Dette er en ekstra stil og er ikke obligatorisk å bruke.

For kroppsstilen bruker vi bakgrunnsfargen og skriftfargen kollektivt for å legge til en stil på websiden for å gjøre den estetikk for brukerne. En annen viktig funksjon som brukes til å bruke visningsegenskapen er å nevne HTML -kroppsbredden for å vise alt HTML -innholdet i en enkelt linje.

Kropp
Bredde: 60%;

Lagre koden i Text Editor -filen med HTML -utvidelsen for å gjøre den til et ikon av nettleseren som viser at det er en webside. Utfør den i nettleseren. Den forventede websiden har en liste over alle elementene i en vertikal notasjon hvis det ikke er noen inline-block-egenskap.

Men som et resultat av denne displayet CSS -egenskapen, ser vi at alle elementene på listen vises i en enkelt horisontal linje uten kuler. Det ser ikke lenger ut som en liste. Men det ser ut som et enkelt avsnitt med standardromene mellom ordene.

Eksempel 2: Ingen linjeselier i div

Akkurat som lister, når listen blir konvertert til et avsnitt, er vi i stand til å bruke visningseffekten på noe annet HTML -innhold. Så vi har valgt en div. En div er beholderen som inneholder det andre HTML -innholdet i den. Først må du vurdere en enkel div -tag der vi ikke har brukt noen CSS -effekt av “No Line Break”. Men DIV er forsynt med sine grunnleggende stylinger som polstring og farge for å vise eksistensen av begge divene på websiden.

Div en

Det samme gjelder div to.

Lagre koden og kjør den i nettleseren. Du vil se at to diver vises vertikalt med spesifikasjonene som vi brukte som en inline CSS inne i taggene. Disse divene vises uten noen pause mellom dem. Som sett i utgangen er begge divene vedlagt.

Hver gang en div eller et bord brukes i HTML, legger de begge en etter hverandre i vertikal retning som vi representerte. Dette er fordi HTML genererer bilavstanden ved å følge polstringsverdien som brukeren som brukes for å holde dem i en enkelt linje. Ved å bruke fenomenet “No Line Break”, gjennomgår vi noen endringer i koden.

Først bruker vi skjermegenskapen med den inline-block-egenskapen til begge DIV-er i CSS.

Div
Display: Inline-block;

Dessuten må vi redusere kroppsbredden på HTML slik at begge divene kan tilpasse seg den gitte størrelsen på kroppen.

Kropp
Bredde: 30%;

Ved utførelse vil du se at de to divene som vi erklærte brukte CSS -egenskapen “No Line Break”.

Ytterligere måter:

Noe tilleggsinformasjon om egenskapen til "No Line Break" er ledsaget gjennom HTML -kodene uten bruk av CSS -kodene separat.

En måte er å bruke strengen  . Å bruke denne strengen mellom to strenger forårsaker et rom ved å få dem til å holde seg på samme linje i stedet for å bruke en
Tag som fører mot følgende linje. OPERTIGHETEN OG (&) brukes til bindingsformål.

123  

En annen måte å gap mellom to strenger er at HTML bruker en innebygd funksjon “NBSP” eller “ikke-brytende rom”. Vi bruker NBSP mellom to tall. Resultatene vil ha et rom.

456

Nå, ved henrettelse, vil du se rommet mellom disse tre tallene uten å bruke linjepausen.

Konklusjon

CSS -artikkelen “No Line Break” forklarer bruken av egenskapene til CSS og HTML annet enn Break -effekten som brukes gjennom HTML -brakk -taggen
. I starten ga vi en enkel introduksjon om HTML og CSS. Eiendommen som hovedsakelig er ansvarlig for "No Line Break" -effekten blir forklart som inline-block-displayegenskapen. Vi forklarte inline-block-displaybruken i HTML-listene og DIV-containerne gjennom eksempler. Dessuten blir også noe tilleggsinformasjon om dette emnet lagt til.