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 » PHP Hvordan legge til en matrise i PHP? Arrays er viktig for å holde forskjellige typer data på ett sted. Følg denne artikkelen for å lære f... Alexander Sørlie C ++ Hvordan bruke boolske uttrykk i C ++ Et boolsk uttrykk er en kombinasjon av operatører med en operand, og brukes til å sammenligne to ver... Alexander Sørlie C skarp Hvordan konvertere en desimal til en dobbel i C# For å konvertere en desimalverdi til en dobbel i C#, bruker vi desimalen.Todouble () -metode. Det ta... Daniel Berntsen C ++ Rekke strukturer i C ++ Martin Berge Python Python Stringio Simen Stensrud Golang Introduksjon til Golang -programmeringsspråk Oskar Fossum Java Hvordan konvertere et kart til en streng i Java? Mathias Halvorsen Kraftskall Hvordan bruke get-adprincipalGroupMembership i PowerShell Daniel Berntsen Kraftskall Hva er trinnene for å lansere Windows PowerShell Mathias Halvorsen Docker Hvordan drepe en Docker -beholder? Erik Røed PHP Hva er forskjellen mellom .= og += operatører i PHP Elias Krogh Svendsen Oracle Database Hvordan slette sekvens i Oracle? Lars Solberg Golang Hvordan du bruker utsett nøkkelordet i golang Simen Stensrud