单行文本与多行文本溢出隐藏以省略号显示

• 单行文本溢出隐藏以省略号显示

  .box{
      /* 限定盒子的宽度 */
      width:500px;
      white-space: nowrap; /*文本不换行*/
      /* 溢出隐藏 */
      overflow: hidden;
      /* 文本溢出以省略号显示 */
      text-overflow: ellipsis;
  }
  

• 多行文本溢出隐藏以省略号显示

  /* 多行文本溢出隐藏 */
  .box1{
      border: solid blue;
      margin: 30px auto;
      /* 限定盒子的宽度 */
      width: 500px;
      display: -webkit-box;  /*将元素作为弹性盒子模型显示*/
      -webkit-line-clamp: 4; /*用来限制在一个块元素中显示的文本行数
      -webkit-box-orient: vertical; /*检索伸缩盒子的元素的排列方式*/
      /* 溢出隐藏 */
      overflow: hidden;
      /* 文本溢出以省略号显示 */
      text-overflow: ellipsis;
  }
  

  • 兼容方式：多行文本的第二种实现方式

  • 限定高度和行高

  • 给元素添加伪类设置省略号

  .box2{
      border: solid 3px;
      margin: auto;
      width: 500px;
      height: 90px;
      line-height: 30px;
      overflow: hidden;
      position: relative;
  }
  
  .box2:after{
      content:'...';
      position: absolute;
      right:0px;
      bottom:0px;
      background: #fff;
      padding-left:8px;
  }