CSS-egenskapen overflow
styr vad händer med innehåll som är för stort för att passa in i ett område.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#overflowTest {
background: #4CAF50;
color: white;
padding: 15px;
width: 50%;
height: 100px;
overflow: scroll;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>The overflow property controls what happens to content that is too big to fit into an area.</p>
<div id="overflowTest">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
</body>
</html>
Egenskapen overflow
anger om den ska klippas innehållet eller för att lägga till rullningslister när innehållet i ett element är för stort för att passa i det angivna område.
Egenskapen overflow
har följande värden:
visible
- Standard. Överflödet är inte klippt. Innehållet återges utanför elementets box
hidden
- Överflödet är klippt, och resten av innehållet kommer att vara osynligt
scroll
- Överflödet klipps, och en rullningslist läggs till för att se resten av innehållet
auto
- Liknar scroll
, men den lägger bara till rullningslister när det behövs
Obs! Egenskapen overflow
fungerar bara för blockelement med en specificerad höjd.
Obs: I OS X Lion (på Mac) är rullningslister dolda som standard och visas endast när de används (även om "overflow:scroll" är inställt).
overflow: synlig
Som standard är överflödet synligt
, vilket betyder att det inte är klippt och det återges utanför elementets box:
div {
width: 200px;
height:
65px;
background-color: coral;
overflow: visible;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>Overflow: visible</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
overflow: hidden
Med värdet dolt
klipps överflödet och resten av innehållet döljs:
div {
overflow: hidden;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Overflow: hidden</h2>
<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>
<p>Try to remove the overflow property to understand how it works.</p>
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
overflow: scroll
Om du ställer in värdet på scroll
, klipps överflödet och en rullningslist läggs till för att rulla inuti rutan. Observera att detta kommer att lägga till en rullningslist både horisontellt och vertikalt (även om du inte behöver det):
div {
overflow: scroll;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Overflow: scroll</h2>
<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):</p>
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
overflow: auto
Värdet auto
liknar scroll
, men det lägger bara till rullningslister när det behövs:
div {
overflow: auto;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<h2>Overflow: auto</h2>
<p>The auto value is similar to scroll, only it add scrollbars when necessary:</p>
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
overflow-x
och overflow-y
Egenskaperna overflow-x
och overflow-y
anger om du ska ändra överflödet av innehåll bara horisontellt eller vertikalt (eller både):
overflow-x
anger vad som ska göras med vänster/höger kanter på innehåll.
overflow-y
anger vad som ska göras med de övre/nedre kanterna på innehåll.
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>Overflow-x and overflow-y</h2>
<p>You can also change the overflow of content horizontally or vertically.</p>
<p>overflow-x specifies what to do with the left/right edges of the content.</p>
<p>overflow-y specifies what to do with the top/bottom edges of the content.</p>
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
Anger vad som händer om innehållet svämmar över ett elements box
Anger om webbläsaren kan bryta rader med långa ord eller inte, if de svämmar över dess behållare
Anger vad som ska göras med vänster/höger kanter av innehållet om det svämmar över elementets innehållsområde
Anger vad som ska göras med de övre/nedre kanterna av innehållet om det svämmar över elementets innehållsområde