CSS Nieruchomość przepełnienia | Wyjaśnione

Podczas opracowywania stron internetowych często spotykamy sytuacje, w których treść obecna w niektórych elementach HTML przepełnia się. Możesz wybrać, co zrobić z przepełnioną zawartością za pomocą właściwości przepełnienia CSS. Ten post został zaprojektowany w celu oświecenia czytelników na temat szczegółów właściwości przepełnienia w CSS.

Ten samouczek obejmuje.

1. Nieruchomość przepełnienia
2. Widoczna wartość
3. Ukryta wartość
4. Wartość automatyczna
5. Przepełnienie-X i przepełnienie-y

Zaczynajmy.

Nieruchomość przepełnienia

Właściwość przepełnienia kontroluje zachowanie treści, które przepełnia określony obszar elementu, a ponadto właściwość przepełnienia jest zaprojektowana tylko dla elementów na poziomie blokowym.

Podobnie jak inne właściwości CSS, właściwość przepełnienia wykazuje również pewne wartości, które są szczegółowo wyjaśnione poniżej.

Widoczna wartość

Jest to domyślna wartość właściwości przepełnienia. Załóżmy, że jeśli treść jest umieszczona w pudełku i przepełnia się, ta wartość wyświetli zawartość przekraczającą obszar pudełka. Ponadto zawartość wyświetlana poza granicą pudełka nie zakłóci wyrównania innych otaczających elementów.

Oto przykład tej wartości.

Html

Podczas opracowywania stron internetowych często spotykamy sytuacje, w których treść obecna w niektórych elementach HTML przepełnia się. Możesz wybrać, co zrobić z przepełnioną zawartością za pomocą właściwości przepełnienia CSS.

CSS

Wyjście

Przejście do następnej wartości.

Ukryta wartość

Ukryta wartość właściwości przepełnienia ukrywa całą zawartość przekraczającą powierzchnię pudełka. Ta właściwość powinna być obsługiwana ostrożnie, ponieważ treść, którą ukrywa ta właściwość, jest całkowicie niewidoczna dla użytkownika, jednak najlepiej nadaje się do wyświetlania treści, która ma charakter dynamiczny. Poniżej znajduje się przykład ukrytej wartości.

Wyjście

Treść przekraczająca obszar pudełka została ukryta.

Wartość przewijania

Ta wartość ukrywa zawartość, która przekracza obszar pola wewnątrz pudełka i zapewnia zarówno pionowe, jak i poziome paski przewijania, aby wyświetlić zawartość. Oto przykład.

Wyjście

Dodano paski przewijania.

Wartość automatyczna

Ta wartość ma podobną funkcję jak wartość przewijania, jednak odróżnia się od wartości przewijania, jest to, że dodaje paski przewijania tylko wtedy, gdy treść przekracza obszar pudełka. Ponadto doda tylko rodzaj wymaganego paska przewijania. Oto przykład.

Wyjście

Automatyczna wartość właściwości przepełnienia z powodzeniem zastosowana.

Przepełnienie-X i przepełnienie-y

Są to kolejne dwa właściwości, które kontrolują to, co dzieje się z przepełnioną zawartością w poziomie lub w pionie. Właściwość przepełnienia-X kontroluje poziome zachowanie zawartości, podczas gdy właściwość przepełnienia Y określa zachowanie pionowe treści. Oto przykład.

W powyższym przykładzie właściwości przepełnienia-X przypisano wartość przewijania, a przepełnienie-y przepełniono wartość ukrytą, w wyniku czego zawartość przekraczająca obszar pola zostanie ukryta, a pole będzie miało pionowy pasek przewijania.

Wyjście

Wniosek

Właściwość przepełnienia służy do kontrolowania zachowania treści, która przepełnia określony obszar elementu, a ponadto właściwość przepełnienia jest zaprojektowana tylko dla elementów na poziomie blokowym. Właściwość przepełnienia renderuje cztery wartości; widoczne, zwojowe, ukryte I automatyczny. Istnieją kolejne dwa właściwości, które kontrolują to, co dzieje się z przepełnioną zawartością poziomo lub pionowo; przepełnienie-x I przepełnienie-y. W tym poście szczegółowo omawia właściwość przepełnienia za pomocą odpowiednich przykładów.