Larghezza di dimensioni automatiche con contenuto di adattamento in CSS

Il contenuto di adattamento in CSS viene utilizzato per consentire al testo o all'immagine di espandersi o restringersi in base alla dimensione mutevole di un testo o di un'immagine. Se il volume del contenuto aumenta, anche i bordi o la larghezza si espandono automaticamente e quando il volume del contenuto diminuisce, anche i bordi o la larghezza diminuiscono automaticamente nell'output.

Discutiamo il funzionamento dell'istruzione Fit-Content e il suo impatto sui risultati dell'output con un codice di esempio.

Larghezza automatica

La proprietà di larghezza CSS viene utilizzata per dimensioni automatiche del bordo in un documento HTML ed è scritta come:

Larghezza: contento fit;

Come utilizzare la proprietà "larghezza: contenuto fit" per automaticamente?

Ci deve essere una classe in cui viene creato l'elemento per la quale è richiesto il dimensionamento automatico. Ad esempio, esiste un "principale" di classe contenente un testo che richiede un dimensionamento automatico:

Parte HTML

Questo è un documento per spiegare la larghezza dell'autosizzazione in HTML utilizzando la proprietà CSS Fit-Content.

Parte CSS | Proprietà CSS per le dimensioni automatiche

La proprietà CSS necessaria per dimensioni automatico del testo aggiunto nella classe sarà:

.principale
Margine: 30px 50px;
Bordo: 2px Solid RGB (12, 125, 139);
Larghezza: contento fit;

Qui:

• Aggiungi un elemento di stile e aggiungi una proprietà a margine che definirà la larghezza e l'altezza in cui l'uscita deve essere posizionata sullo schermo.
• Aggiungi la proprietà del bordo dichiarando il peso del bordo.
• E scrivi la proprietà di larghezza come "larghezza: contenuto fit".

Questo creerà il seguente output:

Modificare il volume del contenuto

Ora, per vedere come le dimensioni automatiche del contenuto adatto sono gli elementi, cambiamo (aumento o diminuiamo) la dimensione del contenuto:

Questo è un documento!

Al cambiamento del contenuto del contenitore DIV, anche la dimensione del bordo cambierà automaticamente:

Questa è stata una chiara spiegazione di come utilizzare la proprietà CSS Fit-Content per la larghezza automatica in un documento HTML.

Conclusione

Per utilizzare il contenuto adatto per dimensioni automatiche della larghezza, è necessario aggiungere il "Larghezza: contento"Proprietà nell'elemento di stile insieme ad altre proprietà di stile come margine e bordo. Ciò allungherà l'area e quindi i bordi automaticamente nell'uscita se il testo aumenta di volume e diminuisce l'area se il volume del testo diminuisce.