[分享]css两行变成点

在CSS中，将两行文本变成点有很多种实现方式，这里介绍其中两种比较常见的实现方法。

//方法一
.content{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

//方法二
.content{
  position: relative;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.content:after{
  content: "...";
  position: absolute;
  top: 0;
  right: -14px;
  width: 1em;
  margin-left: 2px;
  background: linear-gradient(to right, transparent, #fff 50%);
} 

方法一使用了CSS的新属性-webkit-line-clamp，它可以设置一个元素的文本行数，并在超出文本长度时用省略号代替。同时，使用display: -webkit-box 和 -webkit-box-orient: vertical属性可以让元素在竖直方向上按照一定的行数排列。这种方法的缺点是只适用于webkit内核的浏览器。

方法二利用了CSS的text-overflow: ellipsis属性，它可以在元素的文本内容超出元素宽度时显示省略号。同时，可以通过为元素增加一个伪元素:after来实现点的效果。缺点是需要将元素设置为display: inline-block，不能使用在块状元素上。