Υπερχείλιση CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Η ιδιότητα υπερχείλιση CSS ελέγχει τι συμβαίνει σε περιεχόμενο που είναι πολύ μεγάλο για να χωρέσει σε μια περιοχή.

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.

Δοκιμάστε το μόνοι σας →

<!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

Η ιδιότητα υπερχείλιση καθορίζει εάν θα γίνει αποκοπή το περιεχόμενο ή για να προσθέσετε γραμμές κύλισης όταν το περιεχόμενο ενός στοιχείου είναι πολύ μεγάλο για να χωρέσει στο καθορισμένο περιοχή.

Η ιδιότητα υπερχείλιση έχει τις ακόλουθες τιμές:

visible

- Προκαθορισμένο. Η υπερχείλιση δεν έχει κοπεί. Το περιεχόμενο αποδίδεται έξω από το πλαίσιο του στοιχείου

hidden

- Η υπερχείλιση κόπηκε και το υπόλοιπο περιεχόμενο θα είναι αόρατο

scroll

- Η υπερχείλιση κόβεται και προστίθεται μια γραμμή κύλισης για να δείτε το υπόλοιπο περιεχόμενο

auto

- Παρόμοιο με το κύλιση, αλλά προσθέτει γραμμές κύλισης μόνο όταν είναι απαραίτητο

Σημείωση: Η ιδιότητα υπερχείλιση λειτουργεί μόνο για στοιχεία μπλοκ με καθορισμένο ύψος.

Σημείωση: Στο OS X Lion (σε Mac), οι γραμμές κύλισης είναι κρυφές από προεπιλογή και εμφανίζονται μόνο όταν χρησιμοποιούνται (παρόλο που έχει οριστεί το "overflow:scroll").

Ιδιότητα CSS υπερχείλιση: ορατή

Από προεπιλογή, η υπερχείλιση είναι ορατή, που σημαίνει ότι δεν έχει περικοπεί και αποδίδεται έξω από το πλαίσιο του στοιχείου:

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 {
  width: 200px;
  height: 
  65px;
  background-color: coral;
  
overflow: visible;
}

Δοκιμάστε το μόνοι σας →

<!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 υπερχείλιση: κρυφή

Με την τιμή hidden, η υπερχείλιση κόβεται και το υπόλοιπο περιεχόμενο αποκρύπτεται:

Παράδειγμα

div {
  overflow: hidden;
}

Δοκιμάστε το μόνοι σας →

<!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 υπερχείλιση: κύλιση

Ορίζοντας την τιμή σε κύλιση, η υπερχείλιση κόβεται και προστίθεται μια γραμμή κύλισης για κύλιση μέσα στο πλαίσιο. Σημειώστε ότι αυτό θα προσθέσει μια γραμμή κύλισης τόσο οριζόντια όσο και κάθετα (ακόμα κι αν δεν τη χρειάζεστε):

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 {
  overflow: scroll;
}

Δοκιμάστε το μόνοι σας →

<!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 υπερχείλιση: αυτόματη

Η τιμή auto είναι παρόμοια με την τιμή κύλιση, αλλά προσθέτει γραμμές κύλισης μόνο όταν είναι απαραίτητο:

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 {
  overflow: auto;
}

Δοκιμάστε το μόνοι σας →

<!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 overflow-x και overflow-y

Οι ιδιότητες overflow-x και overflow-y καθορίζουν εάν θέλετε να αλλάξετε την υπερχείλιση περιεχομένου μόνο οριζόντια ή κάθετα (ή και τα δυο):

Το overflow-x καθορίζει τι να κάνετε με τα αριστερά/δεξιά άκρα του περιεχόμενο.
Το overflow-y καθορίζει τι πρέπει να κάνετε με τις επάνω/κάτω άκρες του περιεχόμενο.

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 {
  overflow-x: hidden; /* Hide horizontal scrollbar 
*/
  overflow-y: scroll; /* Add vertical scrollbar */
}

Δοκιμάστε το μόνοι σας →

<!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>

Όλες οι ιδιότητες υπερχείλισης CSS

overflow

Καθορίζει τι συμβαίνει εάν το περιεχόμενο υπερχειλίσει το πλαίσιο ενός στοιχείου

overflow-wrap

Καθορίζει εάν το πρόγραμμα περιήγησης μπορεί ή όχι να σπάσει τις γραμμές με μεγάλες λέξεις, εάν ξεχειλίζουν το δοχείο του

overflow-x

Καθορίζει τι θα γίνει με την αριστερή/δεξιά άκρη του περιεχομένου εάν υπερχειλίσει την περιοχή περιεχομένου του στοιχείου

overflow-y

Καθορίζει τι πρέπει να κάνετε με τις επάνω/κάτω άκρες του περιεχομένου εάν υπερχειλίσει την περιοχή περιεχομένου του στοιχείου