CSS ການຈັດການ - ການຫຼຸດອອກ
- 上一页 CSS z-index
- 下一页 CSS 浮动
CSS overflow 属性控制对太大而区域无法容纳的内容的处理方式。
CSS Overflow
overflow
属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow
属性可设置以下值:
visible
- ກົດເກນມັນຈະບໍ່ຕັດກັນການຫຼຸດອອກ. ຂໍ້ມູນຈະຈັດພາບພາຍໃນບັນຫາທີ່ຈະຕ້ອງການ.hidden
- ການຕັດກັນການຫຼຸດອອກອອກແລະບັນຫຼາຍຂໍ້ມູນຈະບໍ່ສາມາດເບິ່ງໄດ້.scroll
- ການຕັດກັນການຫຼຸດອອກອອກແລະຈະໃຫ້ຕິດຕັ້ງຕາມຕາຕໍ່ສາຍເພື່ອເບິ່ງຂອງຂໍ້ມູນທີ່ຫຼຸດອອກ.auto
- ກັບscroll
ຄືກັນກັບບັນຫາທີ່ຈະຕິດຕັ້ງຕາມຂັ້ນຕອນທີ່ຈະຕ້ອງການ.
ຄວາມຄິດ:overflow
ປະເພດກ່ຽວກັບບັນຫາທີ່ຈະພິຈາລະນາວ່າຈະຕັດກັນຂັດຂອງຂໍ້ມູນຫຼືຈະໃຫ້ຕິດຕັ້ງຕາມຕາຕໍ່ສາຍຖ້າຂັດຂອງຂໍ້ມູນຫຼຸດອອກຈາກບັນຫາທີ່ກໍານົດ.
ຄວາມຄິດ:ໃນ OS X Lion (ໃນ Mac) ຕາມກົດເກນມັນຈະຖືກປິດຕາມກົດເກນແລະຈະສະແດງຕາມການນໍາໃຊ້ (ເຖິງວ່າເຈົ້າໄດ້ກໍານົດ "overflow:scroll").
overflow: visible
ໂດຍກົດເກນມັນຈະເປັນທີ່ຫຼຸດອອກທີ່ຈະຖືກຕ້ອງ:visible
) ມັນຈະບໍ່ຖືກຕັດກັນອອກແຕ່ຈະຈັດພາບພາຍໃນບັນຫາທີ່ຈະຕ້ອງການ:
实例
div { width: 200px; height: 50px; background-color: #eee; overflow: visible; }
overflow: hidden
ຖ້າເຈົ້າຈະໃຊ້ hidden
ທີ່ຈະຕັດກັນການຫຼຸດອອກຈະຖືກຕັດກັນອອກແລະບັນຫາທີ່ຫຼຸດອອກຈະຖືກປິດຫຼັງ:
实例
div { overflow: hidden; }
overflow: scroll
ຖ້າເຈົ້າຈະເລືອກຄວາມຄ້າຍຄືກັນ scroll
ການຫຼຸດອອກຈະຖືກຕັດກັນອອກແລະຈະໃຫ້ຕິດຕັ້ງຕາມຕາຕໍ່ສາຍເພື່ອຫຼຸບຂອງບັນຫາພາຍໃນບັນຫາ. ສັງເກດວ່າຈະໃຫ້ຕິດຕັ້ງຕາມຕາຕໍ່ສາຍຂະໜາດທັງສາຍລະຫວ່າງວິທີທາງສູງ/ທາງລະຫວ່າງວິທີທາງຫຼັງ (ເຖິງວ່າເຈົ້າບໍ່ຕ້ອງການໃຫ້ມີ):
实例
div { overflow: scroll; }
overflow: auto
auto
ທີ່ມີຄວາມຄ້າຍຄືກັນ scroll
ແຕ່ວ່າຈະໃຫ້ຕິດຕັ້ງຕາມຂັ້ນຕອນທີ່ຈະຕ້ອງການ:
实例
div { overflow: auto; }
overflow-x ແລະ overflow-y
overflow-x
ແລະ overflow-y
ປະເພດກ່ຽວກັບວິທີທີ່ຈະປ່ຽນການຫຼຸດອອກຂອງຂໍ້ມູນທີ່ຫຼຸດອອກຈາກບັນຫາ:
overflow-x
ກ່ຽວກັບວິທີຈັດການຂອງຂໍ້ມູນທີ່ຢູ່ທາງຊ້າຍ/ທາງຫຼັງຂອງບັນຫາ.overflow-y
ກ່ຽວກັບວິທີການຈັດການຂອງຂໍ້ມູນທີ່ຢູ່ທາງຕາມ/ທີ່ຫຼັງຂອງບັນຫາ.
实例
div { overflow-x: hidden; /* 隐藏水平滚动栏 */ overflow-y: scroll; /* 添加垂直滚动栏 */ }
所有 CSS Overflow 属性
属性 | 描述 |
---|---|
overflow | 规定如果内容溢出元素框会发生什么情况。 |
overflow-x | 规定在元素的内容区域溢出时如何处理内容的左/右边缘。 |
overflow-y | 指定在元素的内容区域溢出时如何处理内容的上/下边缘。 |
- 上一页 CSS z-index
- 下一页 CSS 浮动