溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css怎么控制元素的顯示與隱藏，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
屬性介紹：
1. display屬性
display屬性用于設置一個元素應如何顯示。
display: none; 隱藏對象display: block; 除了轉換為塊級元素之外，同時還有顯示元素的意思
display隱藏元素后，不再占有原來的位置。
2. visibility可見性
visibility屬性用于指定一個元素應可見還是隱藏。
visibility: visible; 元素可見visibility: hidden; 元素隱藏
visibility隱藏元素后，繼續占有原來的位置。
如果隱藏元素想要原來的位置，就用visibility: hidden
如果隱藏元素不想要原來的位置，就用display: none
3. overflow溢出
overflow屬性指定了如果內容溢出一個元素的框（超過其指定高度和寬度）時，會發生什么。
一般情況下，我們都不想讓溢出的內容顯示出來，因為溢出的部分會影響布局。但是如果有定位的盒子，請慎用overflow: hidden，因為它會隱藏多余的部分。
4. 溢出的文字省略號顯示
4.1 單行文本溢出顯示省略號
單行文本溢出顯示省略號必須滿足三個條件：
先強制一行內顯示文本
white-space: nowrap; /*默認值normal，自動換行*/
超出的部分隱藏
overflow: hidden;
文字用省略號替代超出的部分
text-overflow: ellipsis;
4.2 多行文本溢出顯示省略號
多行文本溢出顯示省略號，有較大兼容性問題，適合于webkit瀏覽器或移動端，移動端大部分是webkit內核。
overflow: hidden; text-overflow: ellipsis; /*彈性伸縮盒子模型顯示*/ display: -webkit-box; /*限制在一個塊元素顯示的文本的行數*/ -webkit-line-clamp: 2; /*設置或檢索伸縮盒子對象的子元素的排列方式*/ -webkit-box-orient: vertical;
感謝你能夠認真閱讀完這篇文章，希望小編分享css怎么控制元素的顯示與隱藏內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
