Bredde for automatisk størrelse med passform i CSS

Bredde for automatisk størrelse med passform i CSS
Fit-content i CSS brukes til å la teksten eller bildet utvide eller krympe i henhold til den endrede størrelsen på en tekst eller bilde. Hvis volumet på innholdet øker, utvides også grensene eller bredden automatisk, og når volumet på innholdet synker, synker også grensene eller bredden automatisk i utgangen.

La oss diskutere arbeidet med fit-content-uttalelsen og dens innvirkning på utgangsresultatene med en prøvekode.

Bredde for automatisk størrelse

CSS-breddeegenskap brukes til å automatisk størrelse på grensen i et HTML-dokument og er skrevet som:

Bredde: Fit-Content;

Hvordan bruke egenskapen “Bredde: Fit-Content”?

Det må være en klasse der elementet som automatisk størrelse er nødvendig for å være opprettet. For eksempel er det en "hoved" som inneholder en tekst som krever automatisk størrelse:

Html del


Dette er et dokument for å forklare autosiseringsbredde i HTML ved hjelp av CSS Fit-Content-egenskap.

CSS -del | CSS-eiendom til automatisk størrelse

CSS-egenskapen som kreves for å automatisk størrelse på teksten som er lagt til i klassen, vil være:

.hoved
Margin: 30px 50px;
Grense: 2px fast RGB (12, 125, 139);
Bredde: Fit-Content;

Her:

  • Legg til et stilelement og legg til en marginegenskap som vil definere bredden og høyden der utgangen skal plasseres på skjermen.
  • Legg til grenseeiendommer ved å erklære grensevekten.
  • Og skriv breddeegenskapen som “Bredde: Fit-Content”.

Dette vil skape følgende utgang:

Endre innholdsvolumet

Nå, for å se hvor passform-innholds-auto-størrelser elementene, la oss endre (øke eller redusere) størrelsen på innholdet:


Dette er et dokument!

Når du endrer DIV -beholderinnholdet, vil grensestørrelsen også endres automatisk:

Dette var en tydelig forklaring på hvordan du bruker CSS-egenskapen til Fit Constent for å automatisk størrelse bredde i et HTML-dokument.

Konklusjon

For å bruke passform-innhold for å automatisk størrelse på bredden, er det påkrevd å legge til "Bredde: Fit-Content”Eiendom i stilelementet sammen med andre stilegenskaper som margin og grense. Dette vil strekke området og dermed grensene automatisk i utgangen hvis teksten øker i volum og reduserer området hvis tekstvolumet reduseres.