[分享]css两行超出部分省略号

CSS中有时需要对一段文字进行限制长度的操作，若文字长度超出指定长度，则需要省略超出部分。比如常见的两行超出部分省略号的效果。下面我们来介绍实现该效果的CSS样式。 / 单行超出部分省略号 / .el...

CSS中有时需要对一段文字进行限制长度的操作，若文字长度超出指定长度，则需要省略超出部分。比如常见的两行超出部分省略号的效果。下面我们来介绍实现该效果的CSS样式。

 /* 单行超出部分省略号 */
  .ellipsis {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 两行超出部分省略号 */
  .ellipsis-two {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  } 

单行超出部分省略号的实现非常简单，只需要设置容器的宽度，隐藏溢出部分，然后使用text-overflow样式设置省略号即可。

而两行超出部分省略号的实现需要借助CSS3的Flex布局特性，我们先通过display: -webkit-box将容器视为弹性盒子，并设置垂直排列。然后使用-webkit-line-clamp样式设置为2，表示最多显示两行，超出部分省略号。最后同样设置overflow和text-overflow即可。