Khmer Web: Overflow Property

Overflow Property

overflow ជា property ដែលអនុញ្ញាតអោយយើងអាចធ្វើការកំណត់អោយមាន scrollbar ឬអត់ នៅពេលដែល content នៅក្នុង element មួយ មានទំហំធំជាងទំហំរបស់ element នោះ។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Overflow</title>
    <style>
      div {
  		background-color: #eee;
  		width: 200px;
  		height: 50px;
  		border: 1px dotted black;
  		overflow: visible;
	  }
    </style>
  </head>
  
  <body>
	CSS Overflow
	By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

	You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
  </body>
</html>

CSS Overflow

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

យ៉ាងណាម៉ិញ បើសិនជាយើងមិនចង់អោយផ្នែកនៃ content ដែលធំជាងទំហំរបស់ element ណាមួយ លេចចេញរូបរាងមកខាងក្រៅនោះទេ យើងត្រូវកំណត់តំលៃរបស់ property overflow ជា "hidden" ។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Overflow</title>
    <style>
      div {
  		background-color: #eee;
  		width: 200px;
  		height: 50px;
  		border: 1px dotted black;
  		overflow: hidden;
	  }
    </style>
  </head>
  
  <body>
	CSS Overflow
	By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

	You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
  </body>
</html>

CSS Overflow

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

លើសពីនេះទៀត បើសិនជាយើងចង់អោយ scrollbar លេចរូបរាងឡើង នៅពេលដែល content នៅក្នុង element មួយមានទំហំធំជាងទំហំរបស់ element យើងចាំបាច់ត្រូវផ្តល់តំលៃ "scroll" អោយទៅ property overflow ដោយធ្វើដូចខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Overflow</title>
    <style>
      div {
  		background-color: #eee;
  		width: 200px;
  		height: 100px;
  		border: 1px dotted black;
  		overflow: scroll;
	  }
    </style>
  </head>
  
  <body>
	CSS Overflow
	By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

	You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
  </body>
</html>

CSS Overflow

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

យ៉ាងណាម៉ិញ បើសិនជាយើងចង់អោយតែ scrollbar ដេកឬឈរលេចចេញឡើងតែប៉ុណ្ណោះ យើងអាចកំណត់តំលៃ "hidden" ឬ "scroll" សំរាប់ property "overflow-x" ឬ "overflow-y" ដោយធ្វើដូចខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Overflow</title>
    <style>
      div {
  		background-color: #eee;
  		width: 200px;
  		height: 100px;
  		border: 1px dotted black;
  		overflow-x: hidden;
  		overflow-y: scroll;
	  }
    </style>
  </head>
  
  <body>
	CSS Overflow
	By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

	You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
  </body>
</html>

CSS Overflow

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

ដូចគ្នាដែរ បើយើងកំណត់តំលៃសំរាប់ property overflow ជា "auto", scrollbar ណាមួយលេចចេញឡើងតែក្នុងករណីចាំបាច់តែប៉ុណ្ណោះ។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Overflow</title>
    <style>
      div {
  		background-color: #eee;
  		width: 200px;
  		height: 100px;
  		border: 1px dotted black;
  		overflow: auto;
	  }
    </style>
  </head>
  
  <body>
	CSS Overflow
	By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

	You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
  </body>
</html>

CSS Overflow

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.