網頁

2017/9/8

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




沒有留言:

張貼留言