整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
行文本超出隱藏
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
width: 600px;
margin: 100px auto;
border: 1px solid red;
/*文本是否換行*/
white-space: nowrap;
/*文本超出: 顯示省略符號來代表被修剪的文本。*/
text-overflow: ellipsis;
/*超出隱藏*/
overflow: hidden;
}
</style>
</head>
<body>
<p>是指陰影的垂直偏移量，其值也可以是正或負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部；
陰影模糊半徑.................................................
</p>
</body>
</html>多行文本超出隱藏
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
p{
width: 600px;
margin: 100px auto;
border: 1px solid red;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
</head>
<body>
<p>是指陰影的垂直偏移量，其值也可以是正或負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部；
陰影模糊半徑......
</p>
</body>
</html>注意: 目前只在webkit內核瀏覽器(Chrome、Safari、移動端瀏覽器)中生效
一說起隱藏HTML頁面上的元素，很多人第一反應就是設置元素的css屬性display:none;值，這是一種最常見的隱藏頁面元素方法。本篇文章我們就一起看看使用CSS隱藏頁面元素的方法，以及它們的區別。
本篇文章中的例子直接放到github地址中，感興趣的同學可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html
CSS
正如上文說的一樣，最簡單也最粗暴的方法就是設置元素的display屬性為none;
display:none;
設置為display:none;的元素將不會再占用頁面空間，其占用的空間會被其他元素所占有，從而會引起瀏覽器的重排和重匯。
另外一種方法是設置元素的visibility屬性為hidden。
visibility: hidden
這種做法雖然能夠隱藏元素，但是該元素仍會占用頁面空間，因此只會導致瀏覽器的重匯而不會引起重排。
如果希望元素隱藏后不會引起頁面布局的變化，則推薦使用visibility:hidden;方式。
設置元素透明度opacity屬性為0，也可以隱藏頁面元素。
opacity:0
在呈現上與visibility:hidden;方式一樣，同樣會占據頁面空間。
對頁面布局的影響主要是看是否會引起瀏覽器的重匯和重排，對應的差異如下圖所示。
頁面布局差異
display:none;的元素會直接從頁面上消失，因此在該元素上綁定的事件不會生效。
visibility: hidden;的元素不會觸發綁定的事件。
opacity:0; 的元素會觸發綁定的事件，例如點擊會觸發click函數。
我們可以通過以下的例子來看看。
首先我們定義兩個div，分別設置為visibility: hidden;和opacity:0，在兩個div上分別綁定一個click事件。
定義div元素
綁定的事件
當我們在兩個元素都進行點擊時，可以在控制臺看到如下輸出結果。
結果
從上述結果可以看出和上述結論一致。
display:none;的元素會直接從頁面消失，因此定義transition效果完全無效。
visibility:hidden;的元素會在transition設置的時間內消失，但是沒有動畫效果。
opacity:0;的元素可以和正常元素一樣，從頁面以動畫效果消失。
同樣我們可以通過以下這個例子來看看。
首先，我們定義兩個div，并設置其transition屬性。
div元素
定義transition效果
我們通過將鼠標移至元素上，可以看到兩者的差異，從而驗證了上述結論的正確性。
本篇文章主要講解了使用CSS隱藏元素的幾種常用方法，并講解了它們之間的區別，以便大家在特定的場景中進行選擇。
一說起隱藏HTML頁面上的元素，很多人第一反應就是設置元素的css屬性display:none;值，這是一種最常見的隱藏頁面元素方法。本篇文章我們就一起看看使用CSS隱藏頁面元素的方法，以及它們的區別。
本篇文章中的例子直接放到github地址中，感興趣的同學可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html
CSS
正如上文說的一樣，最簡單也最粗暴的方法就是設置元素的display屬性為none;
display:none;
設置為display:none;的元素將不會再占用頁面空間，其占用的空間會被其他元素所占有，從而會引起瀏覽器的重排和重匯。
另外一種方法是設置元素的visibility屬性為hidden。
visibility: hidden
這種做法雖然能夠隱藏元素，但是該元素仍會占用頁面空間，因此只會導致瀏覽器的重匯而不會引起重排。
如果希望元素隱藏后不會引起頁面布局的變化，則推薦使用visibility:hidden;方式。
設置元素透明度opacity屬性為0，也可以隱藏頁面元素。
opacity:0
在呈現上與visibility:hidden;方式一樣，同樣會占據頁面空間。
對頁面布局的影響主要是看是否會引起瀏覽器的重匯和重排，對應的差異如下圖所示。
頁面布局差異
display:none;的元素會直接從頁面上消失，因此在該元素上綁定的事件不會生效。
visibility: hidden;的元素不會觸發綁定的事件。
opacity:0; 的元素會觸發綁定的事件，例如點擊會觸發click函數。
我們可以通過以下的例子來看看。
首先我們定義兩個div，分別設置為visibility: hidden;和opacity:0，在兩個div上分別綁定一個click事件。
定義div元素
綁定的事件
當我們在兩個元素都進行點擊時，可以在控制臺看到如下輸出結果。
結果
從上述結果可以看出和上述結論一致。
display:none;的元素會直接從頁面消失，因此定義transition效果完全無效。
visibility:hidden;的元素會在transition設置的時間內消失，但是沒有動畫效果。
opacity:0;的元素可以和正常元素一樣，從頁面以動畫效果消失。
同樣我們可以通過以下這個例子來看看。
首先，我們定義兩個div，并設置其transition屬性。
div元素
定義transition效果
我們通過將鼠標移至元素上，可以看到兩者的差異，從而驗證了上述結論的正確性。
本篇文章主要講解了使用CSS隱藏元素的幾種常用方法，并講解了它們之間的區別，以便大家在特定的場景中進行選擇。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
