Layout ng CSS - Overflow

Ang CSS overflow attribute ay nag kontrol sa paraan ng pagtanggapin ng nilalaman na mas malaki kaysa sa tinukoy na lugar.

Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman. Ang teksto ay napakalamig, ang taas ng kanyang container ay 100 pixels lamang. Kaya nagdagdag ng scrollbar upang tulungan ang mga mambabasa na maglihis ng nilalaman.

Try It Yourself

CSS Overflow

overflow Ang attribute ay nagtutukoy kung kung saan ang nilalaman ay bubuwisan o magdagdag ng scrollbar kapag ang nilalaman ay mas malaki kaysa sa tinukoy na lugar.

overflow Ang attribute ay maaaring magtatakbo ng mga sumusunod na halaga:

  • visible - Default. Hindi nabubuwisan ang paglilihis. Ang nilalaman ay magpipinta sa labas ng kahon ng elemento
  • hidden - Ang paglilihis ay mabubuwisan, at ang iba pang nilalaman ay hindi makikita
  • scroll - Ang paglilihis ay mabubuwisan, at magdagdag ng scrollbar upang makita ang ibang nilalaman
  • auto - Katulad ng scroll Katulad, ngunit nagdagdag ng scrollbar lamang kapag kinakailangan

Komento:overflow Ang attribute ay gumagamit lamang sa bloke na may tinukoy na taas.

Komento:Sa OS X Lion (sa Mac), ang scrollbar ay nakahide ng default at lumilitaw lamang kapag ginagamit (kahit na ito ay inilagay ang "overflow:scroll").

overflow: visible

Ang default ay makikita ang paglilihis,visible) na ibig sabihin ito ay hindi bubuwisan, kundi magpipinta sa labas ng kahon ng elemento:

Kapag gusto mong maikontrol ang layout nang mas mahusay, maaaring gamitin ang attribute ng overflow.

Example

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

Try It Yourself

overflow: hidden

Kung gamit ang hidden Ang halaga, ang paglilihis ay mabubuwisan, at ang iba pang nilalaman ay hindi makikita:

Kapag gusto mong maikontrol ang layout nang mas mahusay, maaaring gamitin ang attribute ng overflow.

Example

div {
  overflow: hidden;
}

Try It Yourself

overflow: scroll

Kung ang halaga ay scrollAng paglilihis ay mabubuwisan, at magdagdag ng scrollbar upang maglihis sa loob ng kahon: Observe na ito ay magdagdag ng scrollbar sa parehong horizontal at vertical na direksyon (kahit hindi mo nais magamit):

Kapag gusto mong maikontrol ang layout nang mas mahusay, maaaring gamitin ang attribute ng overflow.

Example

div {
  overflow: scroll;
}

Try It Yourself

overflow: auto

auto Ang halimbawa ng halaga ay scrollSubalit ito ay nagdagdag ng scrollbar lamang kapag kinakailangan:

Kapag gusto mong maikontrol ang layout nang mas mahusay, maaaring gamitin ang attribute ng overflow.

Example

div {
  overflow: auto;
}

Try It Yourself

overflow-x at overflow-y

overflow-x At overflow-y Ang attribute ay nagtutukoy kung kung saan ang pagbabago ng paglilihis ng nilalaman: tulad ng horizontal, vertical, o parehong parehong direksyon.

  • overflow-x Tinutukoy kung paano pagtanggapin ang kaliwa at kanang gilid ng nilalaman.
  • overflow-y Tinutukoy kung paano pagtanggapin ang itaas at ibaba ng nilalaman.
Kapag gusto mong maikontrol ang layout nang mas mahusay, maaaring gamitin ang attribute ng overflow.

Example

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

Try It Yourself

All CSS Overflow Attributes

Attribute Description
overflow Specify what will happen if the content overflows the element box.
overflow-x Specify how to handle the left/right edge of the content when the content area of the element overflows.
overflow-y Specify how to handle the top/bottom edge of the content when the content area of the element overflows.