Lära Hantering av Innehållsöverskridning i CSS

Låt oss undersöka hur vi kan kontrollera innehållsöverflödet med hjälp av en egenskap. Ibland har vi ett fast width och height på elementet. Dock kan det inre innehållet vara mycket större än det tillgängliga utrymmet. Egenskapen overflow styr beteendet för ett elements innehåll när det överskrider de explicit satta värdena för height eller width.

overflow: visible | scroll | hidden | auto

visible – är standardvärdet. Innehållet flödar utanför elementets gränser och förblir synligt;
scroll – Innehållet flödar utanför elementets gränser, och en rullningslist visas som gör det möjligt för användaren att rulla både vertikalt och horisontellt;
hidden – Innehållet som flödar utanför elementets gränser kapas och är inte synligt;
auto – fungerar på samma sätt som scroll. Dock visas rullningslister endast när innehållet flödar utanför elementets gränser.

Notera

Det överflödiga innehållet påverkar inte andra elementens geometri.

visible

Om egenskapen overflow inte är satt, är dess standardvärde visible. Det innebär att innehållet kommer att visas utanför elementets gränser. I exemplet är boxens gränser markerade i darkblue, och boxen har fasta egenskaper för width och height.

index.html

index.css

scroll

Vi kan visa hela elementets innehåll med hjälp av en rullningslist. Låt oss titta på exemplet:

index.html

index.css

hidden

Allt överflödigt innehåll kommer att döljas och användaren kommer aldrig att se det. Generellt är detta endast användbart när dekorativa effekter behöver skapas.

index.html

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 12

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you show examples of how each overflow value looks in practice?

What are some common use cases for each overflow property?

How does overflow interact with other CSS properties like position or display?

Awesome!

Completion rate improved to 2.04

Svep för att visa menyn

overflow: visible | scroll | hidden | auto

visible – är standardvärdet. Innehållet flödar utanför elementets gränser och förblir synligt;
scroll – Innehållet flödar utanför elementets gränser, och en rullningslist visas som gör det möjligt för användaren att rulla både vertikalt och horisontellt;
hidden – Innehållet som flödar utanför elementets gränser kapas och är inte synligt;
auto – fungerar på samma sätt som scroll. Dock visas rullningslister endast när innehållet flödar utanför elementets gränser.

Notera

Det överflödiga innehållet påverkar inte andra elementens geometri.

visible

index.html

index.css

scroll

Vi kan visa hela elementets innehåll med hjälp av en rullningslist. Låt oss titta på exemplet:

index.html

index.css

hidden

Allt överflödigt innehåll kommer att döljas och användaren kommer aldrig att se det. Generellt är detta endast användbart när dekorativa effekter behöver skapas.

index.html

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 12