Ancho de tamaño automático con contenido de ajuste en CSS

El contenido de ajuste en CSS se usa para permitir que el texto o la imagen se expanda o se encoja de acuerdo con el tamaño cambiante de un texto o imagen. Si aumenta el volumen del contenido, los bordes o el ancho también se expande automáticamente y cuando disminuye el volumen del contenido, los bordes o el ancho también disminuyen automáticamente en la salida.

Discutamos el funcionamiento de la declaración FIT-Content y su impacto en los resultados de la salida con un código de muestra.

Ancho de tamaño automático

La propiedad de ancho CSS se utiliza para tamaño automático del borde en un documento HTML y se escribe como:

Ancho: Fit-Content;

Cómo usar la propiedad "Ancho: Fit-Content" para autosizar?

Debe haber una clase en la que se cree el elemento para el que se requiere la dimensionamiento automático. Por ejemplo, hay una clase "principal" que contiene un texto que requiere automáticamente:

Parte html

Este es un documento para explicar el ancho de autosización en HTML utilizando la propiedad CSS Fit-Content.

Parte de CSS | Propiedad CSS a tamaño automático

La propiedad CSS que se requiere para tamaño automático el texto agregado en la clase será:

.principal
margen: 30px 50px;
borde: 2px sólido RGB (12, 125, 139);
Ancho: Fit-Content;

Aquí:

• Agregue un elemento de estilo y agregue una propiedad de margen que definirá el ancho y la altura donde la salida debe colocarse en la pantalla.
• Agregue la propiedad fronteriza declarando el peso del borde.
• Y escriba la propiedad de ancho como "Ancho: Fit-Content".

Esto creará la siguiente salida:

Alterando el volumen de contenido

Ahora, para ver cómo los elementos de tamaño de contenido ajustado, cambiemos (aumentemos o disminuyamos) el tamaño del contenido:

Este es un documento!

Al cambiar el contenido del contenedor Div, el tamaño del borde también cambiará automáticamente:

Esta fue una explicación clara de cómo usar la propiedad CSS de contenido ajustado al ancho de tamaño automático en un documento HTML.

Conclusión

Para usar Fit-Content para tamaño automático del ancho, es necesario agregar el "Ancho: contenido de ajuste"Propiedad en el elemento de estilo junto con otras propiedades de estilo como margen y borde. Esto estirará el área y, por lo tanto, los bordes automáticamente en la salida si el texto aumenta en el volumen y disminuye el área si el volumen de texto disminuye.