文本溢出显示省略号

CSS实现

1. 单行

.ellipsis {
  width: 100%; // 可修改
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. 多行

.mult-ellipsis {
  width: 100%; // 可修改
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 行数控制
/* autoprefixer: off */ // 如果使用自动打包， autoprefixer, 会删除这个样式。增加这行注释以保留样式
  -webkit-box-orient: vartival;
/* autoprefixer: on */ // 如果使用自动打包， autoprefixer, 会删除这个样式。增加这行注释以保留样式
}

3.跨浏览器兼容

.imitate_ellipsis{
  position:relative;
  line-height:1.4em;
  height:2.8em;
  overflow:hidden;
  width:130px;
  background-color: orange;
}
.imitate_ellipsis::after{
  content:"...";
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0;
  padding-left:20px;
  background: -webkit-linear-gradient(left, transparent, #fff 62%);
  background: -o-linear-gradient(right, transparent, #fff 62%);
  background: -moz-linear-gradient(right, transparent, #fff 62%);
  background: linear-gradient(to right, transparent, #fff 62%);
}