CSS-spill


Innehållsförteckning

    Visa innehållsförteckning


CSS-egenskapen overflow styr vad händer med innehåll som är för stort för att passa in i ett område.

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.

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>



CSS-spill

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


CSS-egenskapen overflow: synlig

Som standard är överflödet synligt, vilket betyder att det inte är klippt och det återges utanför elementets box:

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.

Exempel

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>




CSS-egenskapen overflow: hidden

Med värdet dolt klipps överflödet och resten av innehållet döljs:

Exempel

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>



CSS-egenskapen 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):

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.

Exempel

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>



CSS-egenskapen overflow: auto

Värdet auto liknar scroll, men det lägger bara till rullningslister när det behövs:

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.

Exempel

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>



CSS-egenskaper 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.

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.

Exempel

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>




Alla CSS Overflow-egenskaper

overflow

Anger vad som händer om innehållet svämmar över ett elements box

overflow-wrap

Anger om webbläsaren kan bryta rader med långa ord eller inte, if de svämmar över dess behållare

overflow-x

Anger vad som ska göras med vänster/höger kanter av innehållet om det svämmar över elementets innehållsområde

overflow-y

Anger vad som ska göras med de övre/nedre kanterna av innehållet om det svämmar över elementets innehållsområde