01 元素的隐藏
1.1 方法1: display设置为none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: none;
}
</style>
</head>
<body>
<div class="box">div元素</div>
<span>测试</span>
</body>
</html>
1.2 方法2: visibility设置为hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
visibility: hidden;
}
</style>
</head>
<body>
<div class="box">div元素</div>
<span>测试</span>
</body>
</html>
1.3 其余2种方法
02 元素内容溢出-[overflow]
2.1 设置为hidden
超出的部分会被截掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 100px;
overflow: hidden;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
具体来看，此次芯片短缺主要分为两类，一类是应用于ESP（电子稳定控制系统）的MCU（微控制单元）。在中国市场，
一般10万元以上的车型，特别是中高端车型都会配备ESP。它是汽车主动安全系统的一部分，能起到防侧滑作用。
另一类是ECU（电子控制模块）中的MCU。ECU广泛应用于汽车各控制系统中，被喻为“行车电脑”。
</div>
</body>
</html>
2.2 设置为auto
当高度不够的时候，会显示滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 100px;
overflow: auto;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
具体来看，此次芯片短缺主要分为两类，一类是应用于ESP（电子稳定控制系统）的MCU（微控制单元）。在中国市场，
一般10万元以上的车型，特别是中高端车型都会配备ESP。它是汽车主动安全系统的一部分，能起到防侧滑作用。
另一类是ECU（电子控制模块）中的MCU。ECU广泛应用于汽车各控制系统中，被喻为“行车电脑”。
</div>
</body>
</html>
03 单行和多行显示省略号
3.1 单行显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
color: #b0b0b0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
具体来看，此次芯片短缺主要分为两类，一类是应用于ESP（电子稳定控制系统）的MCU（微控制单元）。在中国市场，
一般10万元以上的车型，特别是中高端车型都会配备ESP。它是汽车主动安全系统的一部分，能起到防侧滑作用。
另一类是ECU（电子控制模块）中的MCU。ECU广泛应用于汽车各控制系统中，被喻为“行车电脑”。
</div>
</body>
</html>
3.2 多行显示
自己定义几行然后显示省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
color: #b0b0b0;
overflow: hidden;
text-overflow: ellipsis;
/* 多行以后开始显示省略号 */
display: -webkit-box;
/* 表示第几行开始显示省略号 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
具体来看，此次芯片短缺主要分为两类，一类是应用于ESP（电子稳定控制系统）的MCU（微控制单元）。在中国市场，
一般10万元以上的车型，特别是中高端车型都会配备ESP。它是汽车主动安全系统的一部分，能起到防侧滑作用。
另一类是ECU（电子控制模块）中的MCU。ECU广泛应用于汽车各控制系统中，被喻为“行车电脑”。
</div>
</body>
</html>
标签：box,07,ESP,overflow,ECU,MCU,Document,隐藏,溢出
From： https://www.cnblogs.com/yufc/p/18241880