CSS asettelu - ylitys

CSS overflow-ominaisuus hallitsee suuren sisällön käsittelyä, jota ei voida sijoittaa alueeseen.

Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä. Tämä teksti on erittäin pitkä, ja sen säiliön korkeus on vain 100 pikseliä. Siksi lisättiin kelkkapalkki, jotta lukijat voivat pyöriä sisällössä.

Kokeile itse

CSS Overflow

overflow Ominaisuus määrittää, leikataanko sisältöä vai lisätäänkö kelkkapalkki, jos elementin sisältö on liian suuri eikä se mahdu määritettyyn alueeseen.

overflow Ominaisuus voi asettaa seuraavat arvot:

  • visible - Oletus. Ylitys ei leikata. Sisältö piirretään elementin kehys ulkopuolella
  • hidden - Ylitys leikataan ja loput sisältö on näkymätöntä
  • scroll - Ylitys leikataan ja lisätään kelkkapalkki, jotta voit nähdä loput sisällöstä
  • auto - scroll Samankaltainen, mutta lisää kelkkapalkin vain tarvittaessa

Huomautus:overflow Ominaisuus pätee vain blokeihin, joilla on määritelty korkeus.

Huomautus:OS X Leijona (Macissa)essa kelkkapalkki on oletuksena piilotettu ja se näkyy vain käytettäessä (vaikka on asetettu "overflow:scroll").

overflow: visible

Oletuksena ylitys on näkyvää (visible) mikä tarkoittaa, että sitä ei leikata vaan se piirretään elementin kehys ulkopuolella:

Kun haluat hallita asettelua paremmin, voit käyttää overflow-ominaisuutta. overflow-ominaisuus määrittää, mitä tapahtuu, jos sisältö ylittää elementin rajat.

Esimerkki

div {
  leveys: 200px;
  korkeus: 50px;
  background-color: #eee;
  overflow: visible;
}

Kokeile itse

overflow: hidden

Jos käytät hidden arvo, ylitys leikataan ja muu sisältö piilotetaan:

Kun haluat hallita asettelua paremmin, voit käyttää overflow-ominaisuutta. overflow-ominaisuus määrittää, mitä tapahtuu, jos sisältö ylittää elementin rajat.

Esimerkki

div {
  overflow: hidden;
}

Kokeile itse

overflow: scroll

Jos arvo asetetaan scrollSisältö leikataan ja lisätään kelkkapalkki, jotta voit pyöriä sisällössä kehysssä. Huomaa, että tämä lisää kelkkapalkin sekä horisontaalisesti että vertikaalisesti (vaikka et tarvitse sitä):

Kun haluat hallita asettelua paremmin, voit käyttää overflow-ominaisuutta. overflow-ominaisuus määrittää, mitä tapahtuu, jos sisältö ylittää elementin rajat.

Esimerkki

div {
  overflow: scroll;
}

Kokeile itse

overflow: auto

auto arvo on samanlainen kuin scrollmutta se lisää kelkkapalkin vain tarvittaessa:

Kun haluat hallita asettelua paremmin, voit käyttää overflow-ominaisuutta. overflow-ominaisuus määrittää, mitä tapahtuu, jos sisältö ylittää elementin rajat.

Esimerkki

div {
  overflow: auto;
}

Kokeile itse

overflow-x ja overflow-y

overflow-x ja overflow-y Ominaisuus määrittää, muutetaanko sisällön ylitys vain horisontaalisesti (tai vertikaalisesti) tai molemmilla tavoilla:

  • overflow-x Määritä, miten sisällön vasen ja oikea reuna käsitellään.
  • overflow-y Määritä, miten sisällön ylä- ja alareunat käsitellään.
Kun haluat hallita asettelua paremmin, voit käyttää overflow-ominaisuutta. overflow-ominaisuus määrittää, mitä tapahtuu, jos sisältö ylittää elementin rajat.

Esimerkki

div {
  overflow-x: hidden; /* Piilota vaakasuuntainen vierityspalkki */
  overflow-y: scroll; /* Lisää pystysuuntainen vierityspalkki */
}

Kokeile itse

Kaikki CSS Overflow -ominaisuudet

Ominaisuus Kuvaus
overflow Määrittää, mitä tapahtuu, jos sisältö ylittää elementin kehyksen.
overflow-x Määrittää, miten käsitellään elementin sisällön alueen vasen ja oikea reunat, kun sisältö ylittää alueen.
overflow-y Määrittää, miten käsitellään elementin sisällön alueen ylä- ja alareunat, kun sisältö ylittää alueen.