整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ello~~各位小伙伴，今天我們廣州藍(lán)景實(shí)訓(xùn)部，繼續(xù)和大家分享前端技術(shù)干貨，CSS隱藏元素
總結(jié)出7種隱藏元素的辦法
1.CSS display的值是none。(該元素是不會(huì)在頁面上顯示的)
div{
display: none;
}
2. type="hidden"的表單元素。(該元素是不會(huì)在頁面上顯示的)
3. 寬度和高度都顯式設(shè)置為0。(該元素會(huì)在頁面上顯示)
div{
width: 0;
height: 0;
}4. 一個(gè)祖先元素是隱藏的，(該祖先以及祖先以下的元素是不會(huì)在頁面上顯示)
5. CSS visibility的值是hidden(該元素是會(huì)在頁面上顯示，還占原來的位置)
div{
visibility: hidden;
}6. CSS opacity的指數(shù)是0(該元素是會(huì)在頁面上顯示，還占原來的位置)
div{
opacity: 0;
}7. 將position設(shè)為absolute然后將位置設(shè)到不可見區(qū)域
div{
position: absolute;
top: -9999px;
left: -9999px;
}想要了解更多web前端開發(fā)技術(shù)資料，可在評論區(qū)留言！也可添加我們微信：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>是指陰影的垂直偏移量，其值也可以是正或負(fù)值，如果為正值，陰影在對象的底部，反之其值為負(fù)值時(shí)，陰影在對象的頂部；
陰影模糊半徑.................................................
</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>是指陰影的垂直偏移量，其值也可以是正或負(fù)值，如果為正值，陰影在對象的底部，反之其值為負(fù)值時(shí)，陰影在對象的頂部；
陰影模糊半徑......
</p>
</body>
</html>注意: 目前只在webkit內(nèi)核瀏覽器(Chrome、Safari、移動(dòng)端瀏覽器)中生效
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
