Διάταξη CSS - Πορό

CSS overflow property controls how content that is too large to fit in the area is handled.

This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content. This text is very long, and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help readers scroll through the content.

Προσπάθησε να το δοκιμάσεις

CSS Overflow

overflow The property specifies whether the content is clipped or a scrollbar is added when the content is too large to fit in the specified area.

overflow The property can be set to the following values:

  • visible - Default. Overflow is not clipped. Content is rendered outside the element box
  • hidden - The overflow is clipped, and the rest of the content will be invisible
  • scroll - The overflow is clipped, and a scrollbar is added to view the rest of the content
  • auto - With scroll Similarly, but only adds a scrollbar when necessary

Note:overflow The property only applies to block elements with a specified height.

Note:In OS X Lion (on Mac), the scrollbar is hidden by default and only appears when used (even if "overflow:scroll" is set).

overflow: visible

By default, overflow is visible (visible), this means it will not be clipped but rendered outside the element box:

When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element box.

Παράδειγμα

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

Προσπάθησε να το δοκιμάσεις

overflow: hidden

If you use hidden The value, the overflow will be clipped, and the rest of the content will be hidden:

When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element box.

Παράδειγμα

div {
  overflow: hidden;
}

Προσπάθησε να το δοκιμάσεις

overflow: scroll

If the value is set to scrollThe overflow will be clipped, and a scrollbar will be added to scroll within the box. Note that this will add a scrollbar in both horizontal and vertical directions (even if you do not need it):

When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element box.

Παράδειγμα

div {
  overflow: scroll;
}

Προσπάθησε να το δοκιμάσεις

overflow: auto

auto The value is similar to scrollHowever, it only adds a scrollbar when necessary:

When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element box.

Παράδειγμα

div {
  overflow: auto;
}

Προσπάθησε να το δοκιμάσεις

overflow-x and overflow-y

overflow-x and overflow-y The property determines whether the content overflow is changed horizontally or vertically (or both):

  • overflow-x Specify how to handle the left/right edges of the content.
  • overflow-y Specify how to handle the top/bottom edges of the content.
When you want to better control the layout, you can use the overflow property. The overflow property specifies what happens if the content overflows the element box.

Παράδειγμα

div {
  overflow-x: hidden; /* Κατάργηση πλαισίου συρράβματος horizontal */
  overflow-y: scroll; /* Προσθήκη πλαισίου συρράβματος vertical */
}

Προσπάθησε να το δοκιμάσεις

Όλες οι ιδιότητες CSS Overflow

Αξία Περιγραφή
overflow Ορίζει τι θα συμβεί αν το περιεχόμενο υπερβεί το μέγεθος του περιεχομένου του στοιχείου.
overflow-x Ορίζει πώς θα χειριστούν τα περιεχόμενα στις άκρες του περιεχομένου του στοιχείου όταν υπερβαίνει το μέγεθος του περιεχομένου του στοιχείου.
overflow-y Ορίζει πώς θα χειριστούν τα περιεχόμενα στις άκρες του περιεχομένου του στοιχείου όταν υπερβαίνει το μέγεθος του περιεχομένου του στοιχείου.