CSS overflow效果

本篇介紹CSS overflow在固定寬高的<div>的各種效果。

<div style="border:solid 1px gray;width:300px;height:100px;">
  Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation
</div>

如果沒有設定overflow屬性，則預設為overflow:visible，超過範圍的內容會溢出。

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation

overflow:hidden，超過範圍外的內容會被遮蔽。

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation

overflow:scroll，不論內容是否超過範圍都會有捲軸。

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation

overflow:auto，如果內容超過範圍的話就會出現垂直的捲軸，如果內容沒有超過範圍就不會出現捲軸。

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation

overflow:initial，繼承父元素的設定，這邊因為父元素沒有設定，所以是overflow:visible的效果。

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation