Szerokość automatycznego rozmiaru z kontaktem w CSS

Kontent dopasowania w CSS służy do umożliwienia rozszerzania się tekstu lub obrazu w zależności od zmieniającego się rozmiaru tekstu lub obrazu. Jeśli objętość zawartości wzrośnie, granice lub szerokość rozszerza się również automatycznie, a gdy objętość zawartości maleje, granice lub szerokość również automatycznie zmniejsza.

Omówmy działanie instrukcji koncentrującej i jego wpływu na wyniki wyjściowe za pomocą przykładowego kodu.

Szerokość automatycznej wielkości

Właściwość szerokości CSS służy do automatycznego rozmiaru granicy w dokumencie HTML i jest napisana jako:

Szerokość: dopasowanie;

Jak używać właściwości „Width: Fit-Content” do autosyzacji?

Musi istnieć klasa, w której element, dla którego wymagany jest automatyczne rozmiar. Na przykład istnieje klasa „główna” zawierająca tekst, który wymaga automatycznego rozmiaru:

Część HTML

Jest to dokument wyjaśniający szerokość automatyzowania w HTML za pomocą właściwości CSS Fit-Content.

CSS Part | Właściwość CSS do automatycznego rozmiaru

Właściwość CSS wymagana do automatycznego rozmiaru tekstu dodanego w klasie będzie:

.główny
Margines: 30px 50px;
granica: 2px Solid RGB (12, 125, 139);
Szerokość: dopasowanie;

Tutaj:

• Dodaj element stylu i dodaj właściwość marginesu, która zdefiniuje szerokość i wysokość, w której wyjście należy umieścić na ekranie.
• Dodaj własność graniczną, deklarując wagę graniczną.
• I napisz właściwość szerokości jako „szerokość: fit-content”.

To stworzy następujące dane wyjściowe:

Zmiana objętości treści

Teraz, aby zobaczyć, w jaki sposób automatyczne rozmiary elementów, zmieńmy (zwiększ lub zmniejszmy) rozmiar treści:

To jest dokument!

Po zmianie zawartości kontenera Div rozmiar granicy również zmieni się automatycznie:

To było jasne wyjaśnienie, jak korzystać z właściwości CSS-Content CSS do automatycznej szerokości wielkości w dokumencie HTML.

Wniosek

Aby użyć fit-content do automatycznego rozmiaru szerokości, konieczne jest dodanie „Szerokość: kondycja dopasowania„Własność w elemencie stylu wraz z innymi właściwościami stylu, takimi jak margines i granica. Spowoduje to rozciąganie obszaru, a zatem granice automatycznie na wyjściu, jeśli tekst wzrośnie i zmniejszy obszar, jeśli objętość tekstu zmniejszy się.