css如何控制元素的顯示與隱藏

屬性介紹：

（推薦教學：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教學

#

以上是css如何控制元素的顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！