整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ello~~各位小伙伴，今天我們廣州藍景實訓部，繼續和大家分享前端技術干貨，CSS隱藏元素
總結出7種隱藏元素的辦法
1.CSS display的值是none。(該元素是不會在頁面上顯示的)
div{
display: none;
}
2. type="hidden"的表單元素。(該元素是不會在頁面上顯示的)
3. 寬度和高度都顯式設置為0。(該元素會在頁面上顯示)
div{
width: 0;
height: 0;
}4. 一個祖先元素是隱藏的，(該祖先以及祖先以下的元素是不會在頁面上顯示)
5. CSS visibility的值是hidden(該元素是會在頁面上顯示，還占原來的位置)
div{
visibility: hidden;
}6. CSS opacity的指數是0(該元素是會在頁面上顯示，還占原來的位置)
div{
opacity: 0;
}7. 將position設為absolute然后將位置設到不可見區域
div{
position: absolute;
top: -9999px;
left: -9999px;
}想要了解更多web前端開發技術資料，可在評論區留言！也可添加我們微信：philip_tan
行文本超出隱藏
<!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、移動端瀏覽器)中生效
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
