Ikke-brytende plass i en HTML-streng

I fasen av å formatere en webside eller nettsted, er det noen funksjonaliteter eller inkluderte elementer som noen spesifikk tekst, bilder, videoer, tabeller osv. Som ikke trenger å deles eller fordelt mellom to linjer. I et slikt tilfelle er det veldig nyttig å plassere et ikke-brytende rom i en HTML-streng for å forhindre at teksten fortsetter til en ny linje/side.

Denne oppskrivningen vil forklare arbeidet med forskjellige enheter for å legge til et ikke-brytende rom i en HTML-streng.

Hvordan legge til et ikke-brytende rom i en HTML-streng?

Et ikke-brytende rom kan legges til en HTML-streng ved å bruke følgende tilnærminger:

• “&Ensp”Og“ &emsp”Enheter
• “”Og“& thinsp”Enheter
• “ ”Enhet

Eksempel 1: Legg til et ikke-brytende rom i en HTML-streng ved hjelp av & ENSP- og EMSP-enhetene

“& ensp”Enhet brukes til å plassere”to”Blanke mellomrom i en HTML -streng. “& emsp”Enhet plasserer et bredere rom som omfatter”fire”Blanke mellomrom i en HTML -streng. Disse enhetene vil bli brukt separat på to forskjellige HTML -strenger i eksemplet nedenfor.

Nettsted

Nettside

I det ovennevnte eksemplet, spesifiser følgende overskrifter i "”-Kode festet med en“onmouseover”Hendelse som påkaller funksjonen ikke -break ()

Gå videre til JavaScript -delen av koden:

I ovennevnte JS -kode,

• Erklære funksjonen som heter “Non Break ()”.
• I sin definisjon får du tilgang til de spesifiserte overskriftene ved å bruke "dokument.QuerySelector ()”Metode.
• Etter det, bruk "& ensp”Enhet for å bryte strengen på en slik måte at nøyaktig”2”Blanke mellomrom plasseres i den spesifiserte enhetens posisjon.
• Tilsvarende, bruk "& emsp”Enhet. Denne enheten i den spesifiserte stillingen vil gjelde “4”Blanke mellomrom i en annen streng.

Produksjon

Eksempel 2: Legg til et ikke-brytende rom i en HTML-streng ved hjelp av og & thinsp-enhetene

“”Enhet kan brukes for å plassere et enkelt tomt rom og“& thinsp”Enhet plasserer også et enkelt tomt rom, men den er relativt tynn. I det følgende eksempel vil disse enhetene bli brukt på to forskjellige strenger.

Python

JavaScript

For det første, gjenta de ovennevnte tilnærminger for å inkludere de spesifiserte overskriftene som har en tilknyttet “onmouseover”Hendelse som omdirigerer til funksjonen Non Break ()

Følg JavaScript -delen av koden nedenfor:

funksjon nonbreak ()
var element = dokument.querySelector ('#element');
var element1 = dokument.QuerySelector ('#Element1');
element.indrehtml = 'py thon';
Element1.InnerHtml = 'Java Script';

I ovennevnte JS -kode:

• Definere funksjonen som heter “Non Break ()”.
• Her får du tilgang til de spesifiserte overskriftene før du bruker "dokument.QuerySelector ()”Metode.
• Nå, bruk “”Enhet for å anvende et enkelt ikke-brytende rom i den spesielle posisjonen mellom strengverdien og vise denne oppdaterte verdien på dokumentobjektmodellen (DOM) ved å bruke“Innertekst”Eiendom ved å erstatte den spesifiserte samme verdien uten noen plass.
• Tilsvarende, bruk "& thinsp”Enhet til en annen streng. Dette vil resultere i å plassere et relativt tynnere enkelt tomt rom i mellom og vise det på DOM som diskutert i forrige trinn

Produksjon

Eksempel 3: Legg til et ikke-brytende rom i en HTML-streng ved hjelp av  -enheten

“ ”Er en numerisk enhet som også plasserer et enkelt tomt rom. Denne enheten vil bli brukt i det undergitte eksemplet for å skille strengverdien i to halvdeler.

Følg den undergitte kodesnippet:

JavaScript

Klikk for å legge til ikke-brytende rom>/knapp>
funksjon nonbreak ()
var element = dokument.querySelector ('#element');
element.InnerHtml = 'Java Script';

• Inkluder først følgende overskrift med den spesifiserte “id”For å plassere de ikke-brytende områdene i det.
• Etter det, lag en knapp og fest en “ved trykk”Arrangement til det som påkaller funksjonen Non Break ().
• I JS -koden, erklær en funksjon som heter “Non Break ()”. I sin definisjon får du tilgang til den spesifiserte overskriften med dens “id”Bruke“ Documente.QuerySelector ()”Metode.
• Til slutt, bruk den numeriske enheten “ ”To ganger, noe som vil resultere i å plassere to tomme mellomrom mellom strengen. “Innertekst”Eiendom vil transformere den spesifiserte HTML -strengen på DOM deretter på knappeklikket.

Produksjon

Denne artikkelen demonstrerte forskjellige enheter som kan plassere et ikke-brytende rom i en HTML-streng.

Konklusjon

“& ensp”Og“& emsp”Enheter,“”Og“& thinsp”Enheter, eller“ ”Numerisk enhet kan brukes til å plassere ikke-brytende plass i en HTML-streng. & ENSP- og EMSP -enhetene kan brukes til å plassere “2”Og“4”Blanke mellomrom i henholdsvis en HTML -streng. OG & THINP -enhetene kan implementeres for å plassere et enkelt tomt rom og et relativt tynnere tomt rom. Den numeriske enheten fra 160 kan brukes til å plassere et enkelt tomt rom også. Denne bloggen forklarte implementeringen av forskjellige enheter for å anvende ikke-brytende rom i en HTML-streng.