តើ CSS Overflow មានតួនាទីយ៉ាងដូចម្តេច?

CSS overflow ត្រូវបានគេប្រើសំរាប់កំណត់ របៀបបង្ហាញអត្ថបទក្នុងទ្រង់ទ្រាយណាមួយ។ តាមរយៈCSS overflow គេអាចកំណត់របៀបបង្ហាញអត្ថបទ៖ អោយបង្ហាញទាំងអស់ ឬមិនបង្ហាញអត្ថបទណាដែលហួសដែនដែលបានកំណត់  ឬបង្ហាញរបារសំរាប់ទាញមើលអត្ថបទទាំងអស់។

លក្ខណៈសម្បត្តិ overflow មានតម្លៃដូចខាងក្រោម៖

  • visible – លំនាំដើម (default)។ ប្រើសំរាប់បង្ហាញអត្ថបទទាំងអស់។
  • hidden -មិនបង្ហាញអត្ថបទណាដែលវែងហួសដែនដែលបានកំណត់។
  • scroll -បង្ហាញរបារសំរាប់ទាញមើលអត្ថបទទាំងអស់។
  • auto -បង្ហាញរបារសំរាប់ទាញមើលអត្ថបទប្រសិនបើអត្ថបទណាដែលវែងហួសដែនដែលបានកំណត់។

# Visible

តាមលំនាំដើម, overflow គឺអាចមើលឃើញមានន័យថាវាមិនត្រូវបានខ្ទាស់ហើយវាបង្ហាញនៅខាងក្រៅប្រអប់ធាតុនេះ។ សូមមើលឧទាហរណ៍ខាងក្រោម៖

css-overflow15

 

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-overflow16

 

# Hidden

ជាមួយនឹងតម្លៃ hidden, overflow ត្រូវបានខ្ទាស់, ហើយអត្ថបទដែលនៅសល់ត្រូវបានលាក់។ សូមមើលឧទាហរណ៍ខាងក្រោម៖

css-overflow14

 

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-overflow3

# Scroll

ការកំណត់តម្លៃទៅជា scroll នោះ overflow ត្រូវបានខ្ទាស់និងរបាររមូរមួយត្រូវបានបន្ថែមទៅរមូរនៅក្នុងប្រអប់។ ចំណាំថាការវានឹងបន្ថែមរបាររមូរទាំងផ្ដេកហើយនិងបញ្ឈរ (ទោះបីជាអ្នកមិនត្រូវការវាក៏ដោយ)។ សូមមើលឧទាហរណ៍ខាងក្រោម៖

css-overflow13

 

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-overflow5

# Auto

តម្លៃ auto នេះគឺស្រដៀងគ្នាទៅនឹង scroll ដែរ, តែវាបន្ថែមរបាររមូរនៅពេលចាំបាច់។ សូមមើលឧទាហរណ៍ខាងក្រោម៖

css-overflow12

 

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-overflow7

# overflow-x ហើយនិង overflow-y

លក្ខណៈសម្បត្តិ overflow-x និង overflow-y គ្រាន់តែបញ្ជាក់ថាតើត្រូវប្តូរ overflow នៃអត្ថបទមួយទៅជាផ្ដេកឬបញ្ឈរ (ឬទាំងពីរ)៖

  • overflow-x បញ្ជាក់ពីអ្វីដែលត្រូវធ្វើជាមួយនឹងគែមឆ្វេង / ស្តាំនៃអត្ថបទ។
  • overflow-y បញ្ជាក់ពីអ្វីដែលត្រូវធ្វើជាមួយនឹងគែមលើ / ក្រោមនៃអត្ថបទ។

សូមមើលឧទាហរណ៍ខាងក្រោម៖

css-overflow10

 

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-overflow11