Overflow հատկություն

overflow հատկությունը ցույց է տալիս բրաուզերին, թե ինչպես վարվել այն պարունակության հետ (տեքստ, նկարներ, այլ բլոկներ), որոնք դուրս են ցցվում բլոկի սահմաններից (դրա լայնությունից կամ բարձրությունից): Բրաուզերը կարող է թաքցնել դուրս ցցված մասը, ավելացնել ոլորման գծիկներ կամ ոչինչ չանել (թողնել ինչպես կա - դուրս ցցված սահմաններից):

Շարահյուսություն

cssընտրիչ {
  overflow: hidden | scroll | auto | visible;
}

Արժեքներ

Լռելյայն արժեքը՝ visible:

Օրինակ . Visible արժեք

Այս օրինակում շատ երկար բառը չի տեղավորվի կոնտեյներում և կդուրս ցցվի դրա սահմաններից: Կտրում չի կատարվում.

html<div id="elem">
  Լոռեմ իպսում դոլոռ սիթ ամետ
  երկարերկարերկարերկարերկարերկարերկարաբառ,
  կոնսեկտետուր ադիպիսցինգ էլիթ:
</div>

css#elem {
  overflow: visible;
  border: 1px solid red;
  width: 200px;
}

Результат:

Օրինակ . Visible արժեք

Իսկ հիմա սահմանափակված է ոչ միայն լայնությունը, այլ նաև բարձրությունը (տեքստը կդուրս ցցվի բլոկից նաև բարձրությամբ).

html<div id="elem">
  Լոռեմ իպսում դոլոռ սիթ ամետ
  երկարերկարերկարերկարերկարերկարերկարաբառ,
  կոնսեկտետուր ադիպիսցինգ էլիթ:
</div>

css#elem {
  width: 200px;
  height: 40px;
  overflow: visible;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Օրինակ . Hidden արժեք

Հիմա ամեն ինչ, ինչ դուրս է ցցվել կոնտեյների սահմաններից պարզապես կկտրվի (նաև բարձրությամբ): Ուշադրություն դարձրեք նրան, որ բարձրությամբ կտրումը տեղի է ունենում միայն այն ժամանակ, երբ այն հստակ նշված է: Հակառակ դեպքում տեքստը ընդլայնում է կոնտեյները բարձրությամբ - և ոչ մի կտրում չի լինի.

html<div id="elem">
  Լոռեմ իպսում դոլոռ սիթ ամետ
  երկարերկարերկարերկարերկարերկարերկարաբառ,
  կոնսեկտետուր ադիպիսցինգ էլիթ:
</div>

css#elem {
  overflow: hidden;
  width: 200px;
  height: 40px;
  border: 1px solid red;
}

Результат:

Օրինակ . Scroll արժեք

scroll արժեքի դեպքում ոլորման գծիկները կլինեն միշտ, նույնիսկ եթե ոչինչ դուրս չի ցցվում (այս դեպքում դրանք կլինեն ոչ ակտիվ): Հիմա տեքստը դուրս չի ցցվում ոչ լայնությամբ, ոչ բարձրությամբ, բայց ոլորման գծիկները այնուամենայնիվ կան (ոչ ակտիվ).

html<div id="elem">
  Լոռեմ իպսում դոլոռ սիթ ամետ
  երկարերկարերկարերկարերկարերկարերկարաբառ,
  կոնսեկտետուր ադիպիսցինգ էլիթ:
</div>

css#elem {
  overflow: scroll;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Օրինակ . Auto արժեք

auto արժեքի դեպքում ոլորման գծիկները ավելացվում են միայն, եթե պարունակությունը դուրս է ցցվում կոնտեյներից: Հիմա դրանք չկան, քանի որ ամեն ինչ տեղավորվում է.

html<div id="elem">
  Լոռեմ իպսում դոլոռ սիթ ամետ
  երկարերկարերկարերկարերկարերկարերկարաբառ,
  կոնսեկտետուր ադիպիսցինգ էլիթ:
</div>

css#elem {
  overflow: auto;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Օրինակ . Auto արժեք

Իսկ հիմա սահմանափակենք լայնությունը - կհայտնվի հորիզոնական ոլորման գծիկ.

html<div id="elem">
  Լոռեմ իպսում դոլոռ սիթ ամետ
  երկարերկարերկարերկարերկարերկարերկարաբառ,
  կոնսեկտետուր ադիպիսցինգ էլիթ:
</div>

css#elem {
  width: 200px;
  overflow: auto;
  height: 100px;
  border: 1px solid red;
}

Результат:

Տես նաև