50.文本溢出省略

单行文本溢出省略

    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
    }

    .one {
 
    }
      <div class="one"
    title="啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  </div>

• overflow: hidden; // 溢出影藏
• text-overflow: ellipsis; // 溢出显示省略号
• white-space: nowrap; // 段落中的文字不换行
• title="" // 鼠标悬浮提示文字

多行溢出隐藏

伪元素

    .more {
     margin-top: 400px;
     background-color: pink;
     background-color: pink;
     overflow: hidden;
     /* 溢出隐藏 */
     line-height: 20px;
     /* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
     text-align: justify;
     /* 设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末尾文字时才能对齐*/
     position: relative;
     /* 子绝父相，这里是为了给伪元素设置定位*/
   }

   .more::after {
     content: "...";
     /* 省略号是放在文本最后面的 */
     width: 1em;
     /* 设置伪元素的宽度为1em，是为了遮盖的时候正好遮盖中原来的一个字的大小*/
     background-color: pink;
     /* 设置与父元素相同的背景颜色，同理，也是为了和原来的内容样式保持一致*/
     position: absolute;
     /*设置定位，其位置就是文本的右下角 */
     right: 0;
     bottom: 0;
   }
     <div class="more">
   哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦
 </div>

display:-webkit-box

    .more {
      margin-top: 400px;
      background-color: pink;
      /* 设置高度是行高的倍数，防止文本露出一半 */
      line-height: 20px;
      /* 旧版弹性盒 */
      display: -webkit-box;
      /* 弹性盒子元素垂直排列 */
      -webkit-box-orient: vertical;
      /* 控制要显示的行数 */
      -webkit-line-clamp: 3;
      overflow: hidden;
    }