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小時內與您取得聯系。