En ellipsis er et tegnsettingsmerke som består av tre prikker som brukes til å indikere fraværet av et ord, avsnitt, sitat eller mer. Ofte i fiksjon benyttet vi ellipsis for å indikere nøling eller noe for å bygge nysgjerrighet. Mer spesifikt blir disse ellipene utnyttet der setningen ikke er fullført. Så for å vise ellipsis på websiden din, kan CSS-eiendomstekstoverflyt med verdi ellipsis brukes.

Denne artikkelen vil guide deg gjennom hvorfor tekstoverflytegenskapen med verdi ellipsis ikke fungerer.

Hvorfor fungerer ikke tekstoverflyt ellipsis i CSS?

Vi vil diskutere det uttalte emnet ved hjelp av en praktisk demonstrasjon.

For å gjøre det, i HTML, først, legg til et DIV -element med klassenavnet "hoved-”. Legg så til

element for å legge til en overskrift på websiden, en div med klassenavnet “underavsnitt”Som inneholder to DIV -klasser,”Venstreseksjon”Og“Høyre”. Disse to divelementene inneholder

elementer for overskrift, og deretter blir noe innhold lagt til dem. Til slutt, a

Tag blir lagt til for å legge til noe innhold.

Html

Velkommen til Linuxhint -skolen

Kvalitetsutdanning

Vi gir kvalitetsopplæring til verden!

Artikkelskriving

En teknisk forfatter skriver artikler om datavitenskapelige emner.

Du kan lære alle datavitenskapelige emner fra Linuxhint -nettstedet. Vår første prioritet er publikummet vårt.

Strukturen på websiden er fullført og kan sees i bildet nedenfor:

Den neste delen vil demonstrere hvordan du bruker stilegenskaper på HTML -elementene. For dette formålet, legg til eiendommen “tekstoverflyt”Med verdien”ellipser" til

element, “Venstreseksjon”, Og“Høyre”. La oss se hva som vil skje når denne egenskapen blir brukt på elementene.

Style Main Div

.hoved
Bredde: 500px;
Margin: 2px Auto;
polstring: 8px;
Border-Radius: 10px;
bakgrunnsfarge: #432c7a;
Farge: Ghostwhite;

“.hoved-”Henviser til Div -elementet som har klassenavn Main. Beskrivelsen av de anvendte CSS -egenskapene er gitt nedenfor:

• “bredde”Eiendom brukes til å sette elementets bredde til“500px”.
• “margin”Eiendom er satt til“2px auto”Som vil spesifisere et rom på 2px i toppbunnen og like plass til venstre-høyre sidene av Div.
• “polstring”Eiendom med verdien”8px”Legger til et rom på 8px rundt innholdet i Div Main.
• “Border-Radius”Eiendom gjør at hjørnene av Div -elementet er avrundet.
• “bakgrunnsfarge”Eiendom setter den spesifiserte fargen til elementets bakgrunn.
• “farge”Eiendom setter fargen til elementets skrift.

Stil P -element

.hoved-,
.Venstreseksjon,
.Høyre seksjon P
Font-størrelse: 18px;

De

Element i div main, venstreseksjon og høyre seksjon er utstyrt med "skriftstørrelse" som "18px”.

Stil H1 -element i hoveddiven

.hoved h1
tekstoverflow: ellipsis;

Bruk “tekstoverflyt”Eiendom med verdien”ellipsis" til

element i div main.

Stil underavsnitt div

.underavsnitt
Display: Flex;

Div -elementet med klassenavnet “underavsnitt”Brukes med displayegenskapen”Flex”For å lage en fleksibel, responsiv layout.

Stil venstreseksjon div

.Venstreseksjon
bakgrunnsfarge: #FA9393;
polstring: 3px;
Margin: 1px;
Border-Radius: 10px;

“.Venstreseksjon”Henviser til klassens venstreseksjon av DIV-elementet. Forklaringen på egenskapene som brukes på dette DIV -elementet er gitt nedenfor:

• “bakgrunnsfarge”Eiendom bruker farge på elementets bakgrunn.
• “polstring”Eiendom produserer et rom rundt innholdet i venstreseksjonen Div.
• “margin”Eiendom produserer et rom rundt venstreseksjonen DIV-element.
• “Border-Radius”Eiendom gjør de spisse kantene rundt.

Stil høyre seksjon Div

.Høyre
Bakgrunnsfarge: #FF8FB1;
polstring: 3px;
Margin: 1px;
tekstoverflow: ellipsis;
Border-Radius: 10px;

Følgende egenskaper brukes på DIV -elementet med klassenavn "Høyre”:

• “bakgrunnsfarge”Eiendom bruker farge på elementets bakgrunn.
• “polstring”Eiendom gir plass rundt innholdet i venstreseksjonen Div.
• “margin”Eiendom gir plass rundt venstreseksjonen DIV-element.
• “tekstoverflyt”Med verdi brukes ellipsis til å signalisere til brukeren at denne tekstens overløp er skjult.
• “Border-Radius”Eiendom brukes til å konvertere kantene på elementet til runde.

Ved å oppgi koden ovenfor, vises resultatet som følger:

Det kan sees i bildet ovenfor at teksten til overskriften

, Venstreseksjon, og høyre seksjon vises ikke i Ellipsis-teksten. Nå, i neste avsnitt, vil vi bruke tekstoverflytegenskapen med andre egenskaper som vil hjelpe til med å lage teksten med ellipsis (...).

Hvordan bruke tekstoverflyt ellipsis i CSS?

Eiendomstekstoverstrømningen fungerer i kombinasjon med de andre egenskapene hvite rom med verdi Nowrap, Overløp med verdien skjult:

White-Space: Nowrap;
overløp: skjult;
tekstoverflow: ellipsis;

Beskrivelsen av egenskapene er nevnt nedenfor:

• “hvitrom”Eiendom med verdien”Nowrap”Brukes til å justere teksten i en rett linje.
• “flyte”Eiendom med verdien”skjult”Brukes til å skjule overløpsteksten.
• “tekstoverflyt”Eiendom med verdien”ellipsis”Brukes til å gjøre teksten til en ellipsis.

Produksjon

Det er det! Vi har vellykket lært hvorfor CSS-tekst-overflow ellipsis ikke fungerer og hvordan du fikser det.

Konklusjon

I CSS kan tekstoverflytegenskapen tildeles verdien ellipsis. Men det vil ikke fungere alene. Ellipsis fungerer på elementet som er bredde er satt i “piksler”, MÅ HVITT-RETTE-egenskapen må spesifiseres som“Nowrap”, Og verdien av overløpseiendommen som“skjult”. Denne artikkelen har demonstrert hvordan CSS-tekstoverflowegenskapen med verdien ellipsis fungerer og gitt et relevant eksempel.