Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Hantering av Innehållsöverskridning i CSS | Bemästra CSS-positionering
Avancerade CSS-tekniker

bookHantering 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.html

index.css

index.css

copy

scroll

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

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Vad gör egenskapen overflow?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 12

Fråga AI

expand

Fråga AI

ChatGPT

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

Awesome!

Completion rate improved to 2.04

bookHantering av Innehållsöverskridning i CSS

Svep för att visa menyn

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.html

index.css

index.css

copy

scroll

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

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Vad gör egenskapen overflow?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 12
some-alt