07-元素的隐藏和溢出

已注销
69 阅读2分钟

01 方法1: display设置为none

00067.png

<!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>

00068.png

02 方法2: visibility设置为hidden

00069.png

<!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>

03 其余2种方法

00070.png

04 元素内容溢出-[overflow]

4.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>

00071.png

4.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>

00072.png

05 单行和多行显示省略号

5.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>

00073.png

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>

00074.png

avatar
文章
阅读
粉丝