Largeur de dimensionnement automatique avec contenu ajusté dans CSS

Le contenu de l'ajustement dans CSS est utilisé pour permettre au texte ou à l'image de se développer ou de rétrécir en fonction de la taille changeante d'un texte ou d'une image. Si le volume du contenu augmente, les frontières ou la largeur se développent également automatiquement et lorsque le volume du contenu diminue, les bordures ou la largeur diminuent également automatiquement dans la sortie.

Discutons du fonctionnement de l'instruction FIT-CONTENT et de son impact sur les résultats de sortie avec un exemple de code.

Largeur de taille automatique

La propriété de largeur CSS est utilisée pour dimensionner automatiquement la frontière dans un document HTML et est écrite comme:

Largeur: Fit-contenu;

Comment utiliser la propriété «largeur: ajustement» pour automatiquement?

Il doit y avoir une classe dans laquelle l'élément pour lequel la dimensionnement automatique est requis est créée. Par exemple, il y a une classe «Main» contenant un texte qui nécessite une taille automatique:

Partie HTML

Ceci est un document pour expliquer la largeur de la mise en œuvre en HTML à l'aide de la propriété CSS Fit-Contin.

CSS Part | Propriété CSS à la taille automatique

La propriété CSS requise pour la taille automatique du texte ajouté dans la classe sera:

.principal
marge: 30px 50px;
Border: 2px RVB solide (12, 125, 139);
Largeur: Fit-contenu;

Ici:

• Ajoutez un élément de style et ajoutez une propriété de marge qui définira la largeur et la hauteur où la sortie doit être placée sur l'écran.
• Ajouter la propriété des frontières en déclarant le poids de la bordure.
• Et écrivez la propriété de largeur comme «largeur: contenu d'ajustement».

Cela créera la sortie suivante:

Modification du volume de contenu

Maintenant, pour voir à quel point le contenu ajusté la taille automatique des éléments, changeons (augmentons ou diminuons) la taille du contenu:

Ceci est un document!

En modifiant le contenu du conteneur DIV, la taille de la bordure changera également automatiquement:

Ce fut une explication claire de la façon d'utiliser la propriété CSS-contenu Fit-Content à la largeur de taille automatique dans un document HTML.

Conclusion

Pour utiliser le contenu de l'ajustement pour la taille automatique de la largeur, il est nécessaire d'ajouter le «Largeur: ajustement”Propriété dans l'élément de style avec d'autres propriétés de style comme la marge et la bordure. Cela étendra la zone et donc les frontières automatiquement dans la sortie si le texte augmente en volume et diminue la zone si le volume de texte diminue.