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

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

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

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

Արժեքներ

Արժեք	Նկարագրություն
`hidden`	Թաքցնում է բլոկի սահմաններից դուրս ցցված պարունակությունը:
`scroll`	Ավելացնում է ոլորման գծիկներ, ընդ որում միշտ, նույնիսկ եթե ոչինչ դուրս չի ցցվում (այս դեպքում դրանք կլինեն ոչ ակտիվ):
`auto`	Ավելացնում է ոլորման գծիկներ անհրաժեշտության դեպքում. եթե պարունակությունը չի տեղավորվում - դրանք կհայտնվեն, եթե ամեն ինչ տեղավորվում է - դրանք չեն լինի:
`visible`	Չի թաքցնում բլոկի սահմաններից դուրս ցցված պարունակությունը:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Տես նաև

word-break հատկությունը,
որը տեղափոխում է երկար բառի տառերը նոր տող
overflow-wrap հատկությունը,
որը տեղափոխում է երկար բառի տառերը նոր տող
overflow-x հատկությունը,
որը կտրում է հորիզոնական դուրս ցցված մասերը
overflow-y հատկությունը,
որը կտրում է ուղղահայաց դուրս ցցված մասերը