Et kaskaderende stilark er ansvarlig for å gi effektene og egenskapene til HTML -innholdet. Det grunnleggende innholdet som påvirkes er teksten gjennom forskjellige egenskaper som fontfarge, skriftstørrelse, i form av overskrift, avsnitt eller i noen annen beholder. I denne artikkelen vil vi diskutere en CSS -egenskap til teksten som omhandler konseptet om at teksten ikke skal pakkes inn, noe som betyr at det skal vises som den er skrevet i Text Editor.

CSS Wrap Text Property

Denne CSS-egenskapen er en tekstrelatert egenskap. Tekstens justeringsegenskap brukes her for å justere teksten med justeringen i en hvilken som helst ytre beholder eller ved å bruke et lite område for å vise uavhengig. Det lar de lange ordene eller setningene fikses i et bestemt område eller beholder. Du kan også si at de lange ordene er delt inn i to eller flere porsjoner slik at de kan pakkes inn i neste linje. Vi må bruke slike tagger for å minimere sjansen for teksten innpakning slik at teksten ligger på en enkelt linje. Alle disse effektene brukes i henhold til kravene.

For å oppnå innpakningsteksten eller ikke innpakningseiendom, vil vi bruke en spesiell CSS-egenskap som er White-Space-egenskapen.

HVITT-RETE EIENDOM

Dette er CSS-egenskapen som hjelper til med å kontrollere hvordan Line-Break CSS-egenskap og hvitrom-egenskap brukes i en hvilken som helst oppretting og design av websider. Hvitrom er området som er til stede mellom det indre HTML-innholdet og grensen til det ytre HTML-innholdet. Denne egenskapen bestemmer hvordan hvitrommet eller området inne i HTML-elementet håndteres eller kontrolleres.

Noen ganger opprettes plassen automatisk. Vi må fjerne det, eller i andre tilfeller blir de spesielle CSS-effektene brukt for å håndtere det hvite rommet inne i elementet. Det er den samme tilnærmingen for å bruke eller fjerne CSS -innpakningsteksten riktig.

Den grunnleggende syntaksen til innpakningseiendommen er:

White-Space: Normal | Nowrap | Pre | Pre-Wrap | Pre-Line;

Verdien kan være hvilken som helst av de tidligere gitte verdiene som er gitt til hvitrommet-egenskapen. Hvis den hvite rom-egenskapen er gitt av normalverdien, betyr dette at hvitrommet rundt teksten er i henhold til standarddiagrammet for normalitet. Forhåndsinnpakningen forårsaker hvitrommet på venstre side inne i elementet. Dette rommet er mellom teksten og det ytre elementet, så venstre side av elementet vil ha mer plass med "pre" -teksten som har den totale plassen før teksten. Forhåndslinjen forårsaker et linjegap mellom teksten og den ytre elementgrensen.

Hvis vi ikke ønsker å pakke inn teksten, er ikke hvitrommet egenskapen nødvendig for å bli brukt først. Men hvis tekstinnpakningen allerede er gjort og vi må fjerne den, bruker vi "Nowrap" -verdien til denne egenskapen.

Vi vil implementere dette fenomenet i følgende eksempler:

Eksempel 1: Ikke pakk teksten med HTML -tabeller

I dette eksemplet vil vi håndtere den hvite rom-egenskapen i tabellinnholdet. En tabell er en HTML -beholder som bærer teksten og annet innhold inne i den. Bordet skiller seg fra DIV -beholderen siden den har rader og kolonner i den. En tabell har to typer tagger videre i seg - hodemerket og kroppskoden. Hodedelen inneholder tabellrader og kroppsdelen inneholder også tabellrader for å legge til tabelldataene. Mens HTML -dataene legges inn i tabellen i form av rader hver inne i overskriften -taggen av kroppen og inneholder bare avlesningene.

I eksemplet brukes tabellen med grenseegenskapen som er 1 kollaps.

første rad

Denne grensen forhindrer at tabellcellene blir pakket inn. De

og stikkord. Denne delen inneholder verdiene angående overskriften. Alle de videre radene er lagt inn i kroppsseksjonen. Vi bruker Merk for dataene inne i tabellen rader. Lukk alle taggene og lagre dem.

Etter HTML -kroppskoden bruker vi nå CSS -kroppen for å legge til effekten av den hvite avstanden. Det er ikke nødvendig å bruke den interne CSS, da vi direkte vil bruke

brukes til å legge til varene i tabellen. Lukk taggen. Disse radene inneholder overskriften på bordet. Bruk nå kroppen
inne i
Tag som og Tagger. Inne i stilmerket blir "TH" brukt av hvit-rom-effekten. Vi viser teksten inni som en hel setning på en enkelt linje, så vi bruker egenskapen “Nowrap”. Lagre koden i HTML -utvidelsen. Utfør filen i nettleseren for å se den resulterende verdien. Ved utførelse vil du se at det opprettes en tabell med overskriften som er erklært på enkeltlinjen, selv om det er lenge nok til å benytte seg av eiendommen til CSS White-Space. Eksempel 2: Ikke pakk teksten med avsnittet Et annet eksempel vi brukte her er avsnittet. Disse to avsnittene inneholder et enkelt ord med flere bokstaver. Hvis en setning brukes i avsnittet, er det lett å bryte setningen på plass mellom ordene. Men et enkelt ord med mange tegn uten plass er vanskelig å holde uten å pakke teksten. Andre avsnitt brukes med CSS ID. Denne IDen er erklært i hodeseksjonen, noe som gjør den interne CSS. Begge avsnittene har et enkelt ord med mange bokstaver. Vurder nå CSS for denne koden. For det første blir hele kroppen påført med en polstringseffekt og skriftstørrelse. Avsnittet brukes med bilmarginverdi. Denne verdien er avstanden mellom det indre innholdet og den ytre boksen. Vi la også padding -egenskapen til begge avsnitt. Avstanden mellom avsnittet og grensen beregnes gjennom denne polstringsverdien. Overløps -IDen inneholder egenskapen til tekstinnpakning og gir verdien til å bryte ordene slik at teksten kan passe inn i grensen. #overflow Overflow-Wrap: Break-Word; Ved utførelse vil du se at avsnittet der vi ikke har brukt noen klasse for det hvite rommet, overskred grensen som vi startet. Mens andre ledd er begrenset til hvor vi brukte overløpseffekten for å bryte ordet. Konklusjon Denne artikkelen er nyttig når vi trenger å forstå begrepet hvitrom i HTML-innholdet. Hvis vi ønsker å legge til dette hvite rommet i HTML-innholdsverdien, spesielt i teksten, vil teksten bli delt inn i separate ord og vil bruke to eller flere setninger. Men hvis vi ikke vil pakke teksten med CSS White-Space-egenskapen, vises teksten i en enkelt linje uten ordbrudd. Vi brukte to eksempler for å utdype CSS -egenskapen "Don't Wrap Text" med tabellen og avsnittet. « CSS Plus -tegn NetLink 7 C -funksjon » Golang Hva er pakker i Golang? En pakke er en teknikk for å gruppere kode for å gå i gjenbrukbare og håndterbare biter. Følg denne ... Mathias Halvorsen C ++ Hva er minneadresse i C ++ og hvordan du finner den? En minneadresse er plasseringen av en variabel i RAM der dataene er lagret og den kan finnes i C ++ ... Elias Aalerud Aasen Kraftskall Hva er trinnene for å kjøre eksterne kommandoer i PowerShell? De eksterne kommandoene kan utføres ved å aktivere PowerShell Remoting. For å aktivere PowerShell Re... Tobias Andresen Python Python -liste til komma -adskilt streng Daniel Johnsen Python Hvordan pakke ut filer i Python Mathias Halvorsen C skarp Hva er system.Io navneområde i C# Daniel Berntsen Windows OS Hvordan slå på eksternt skrivebord på PC Oskar Fossum JavaScript Hvordan bruke getElementsByTagName -metoden i JavaScript Mathias Halvorsen Kraftskall Hvordan bruke kommandoen “Get-Service” i PowerShell Mathias Halvorsen Oracle Database Hvordan slette sekvens i Oracle? Lars Solberg C ++ Forskjell mellom privat og beskyttet i C ++ Daniel Berntsen C skarp Forhold og hvis du er uttalelser i C# Mathias Halvorsen PHP Hvordan bruke pause og fortsette i PHP? Elias Aalerud Aasen