คุณสมบัติ overflow

คุณสมบัติ overflow กำหนดให้เบราว์เซอร์ทราบ วิธีการจัดการกับเนื้อหา (ข้อความ รูปภาพ บล็อกอื่นๆ) ที่ล้นออกนอกขอบเขต ของบล็อก (เกินความกว้างหรือความสูง) เบราว์เซอร์ สามารถซ่อนส่วนที่ล้นออกมา เพิ่มแถบ เลื่อน หรือไม่ทำอะไรเลย (ปล่อยไว้ ตามเดิม - ให้ล้นออกนอกขอบเขต)

ไวยากรณ์

cssตัวเลือก {
  overflow: hidden | scroll | auto | visible;
}

ค่า

ค่าเริ่มต้น: visible

ตัวอย่าง . ค่า visible

ในตัวอย่างนี้ คำที่ยาวมากจะไม่พอดี ภายในคอนเทนเนอร์และจะล้นออกนอกขอบเขตของมัน ไม่มีการตัด เกิดขึ้น:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

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

Результат:

ตัวอย่าง . ค่า visible

และตอนนี้ไม่เพียงแต่ความกว้างถูกจำกัด แต่ ความสูงก็ถูกจำกัดด้วย (ข้อความจะล้นออกนอกบล็อกทั้งทางความสูง):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

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

Результат:

ตัวอย่าง . ค่า hidden

ตอนนี้ทุกอย่างที่ล้นออกนอกขอบเขตคอนเทนเนอร์ จะถูกตัดออกไปอย่างง่ายดาย (ทั้งทางความสูงด้วย) โปรดสังเกต ว่าการตัดทางความสูงเกิดขึ้น เฉพาะเมื่อกำหนดความสูงไว้ชัดเจนเท่านั้น มิฉะนั้น ข้อความจะขยายคอนเทนเนอร์ทาง ความสูง - และจะไม่มีการตัดใดๆ เกิดขึ้น:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

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

Результат:

ตัวอย่าง . ค่า scroll

ด้วยค่า scroll แถบเลื่อน จะปรากฏเสมอ แม้ว่าจะไม่มีอะไรล้นออกมา (ในกรณีนี้พวกมันจะไม่ทำงาน) ตอนนี้ ข้อความไม่ล้นออกมาทั้งทางความกว้างและความสูง แต่แถบเลื่อนยังคงมีอยู่ (ไม่ทำงาน):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

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

Результат:

ตัวอย่าง . ค่า auto

ด้วยค่า auto แถบเลื่อน จะถูกเพิ่มเฉพาะเมื่อเนื้อหาล้นออกมา นอกคอนเทนเนอร์ ตอนนี้ยังไม่มีพวกมัน เนื่องจากทุกอย่าง พอดี:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

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

Результат:

ตัวอย่าง . ค่า auto

และตอนนี้จำกัดความกว้าง - แถบเลื่อนแนวนอน จะปรากฏขึ้น:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

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

Результат:

ดูเพิ่มเติม