CSS之元素顯示與隱藏
阿新 • • 發佈：2018-11-21
文章目錄
元素的顯示與隱藏
在CSS中有三個顯示和隱藏的單詞比較常見，他們分別是 display visibility 和 overflow。
display 顯示
display 設定或檢索物件是否及如何顯示。
display : none 隱藏物件 與它相反的是 display:block 除了轉換為塊級元素之外，同時還有顯示元素的意思。
特點： 隱藏之後，不再保留位置。
visibility 可見性
設定或檢索是否顯示物件。
visible : 物件可視
hidden : 物件隱藏
特點： 隱藏之後，繼續保留原有位置。（停職留薪）
overflow 溢位
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
visible : 不剪下內容也不新增滾動條。
auto : 超出自動顯示滾動條，不超出不顯示滾動條
hidden : 不顯示超過物件尺寸的內容，超出的部分隱藏掉
scroll : 不管超出內容否，總是顯示滾動條
溢位的文字隱藏
white-space
white-space設定或檢索物件內文字顯示方式。通常我們使用於強制一行顯示內容
normal : 預設處理方式
nowrap : 強制在同一行內顯示所有文字，直到文字結束或者遭遇br標籤物件才換行。
可以處理中文
text-overflow 文字溢位
text-overflow : clip | ellipsis
設定或檢索是否使用一個省略標記（…）標示物件內文字的溢位
clip : 不顯示省略標記（…），而是簡單的裁切
ellipsis : 當物件內文字溢位時顯示省略標記（…）
注意一定要首先強制一行內顯示，再次和overflow屬性 搭配使用