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 somscroll
. 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
Tack för dina kommentarer!
Fråga AI
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
Awesome!
Completion rate improved to 2.04
Hantering 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 somscroll
. 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
Tack för dina kommentarer!