文本超出显示省略符号...

一行的写法

效果如下图

一行的效果图

代码如下

.one {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这里是一行的文字，有很多内容我需要超出部分显示成省略号

一行的实现比较简单，首先控制文本不换行，然后超出部分隐藏，最后设置文本溢出的样式。

多行的写法

效果图如下

多行的效果图

代码实现如下

.introduction {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

这里是多行的文字，有很多内容我需要超出部分显示成省略号，这里是多行的文字，有很多内容我需要超出部分显示成省略号，这里是多行的文字，有很多内容我需要超出部分显示成省略号

多行的实现就稍微麻烦了一点，会需要使用到一些结合属性。
display:-webkit-box 将对象转为弹性伸缩盒子模型
-webkit-box-orient:vertical 设置或检索伸缩盒对象的子元素的排列方式
然后在通过-webkit-line-clamp:3 设置文字需要显示的行数
不过这只方式会有兼容性问题，在不是webkit的浏览器上可能会失效

通过伪元素来实现

效果图如下

兼容性比较好的写法的效果图

代码实现如下

.stable {
  position: relative;
  line-height: 1.4em;
  height: 4.2em;
  overflow: hidden;
}
.stable::after {
  content: '...';
  font-weight: bold;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20rpx 0 0;
  background: #ffffff;
}

  这里是多行的文字，有很多内容我需要超出部分显示成省略号，这里是多行的文字，有很多内容我需要超出部分显示成省略号，这里是多行的文字，有很多内容我需要超出部分显示成省略号

这种写法就兼容性比较好，主要的实现思路就是控制显示区域的宽高，然后通过伪元素在右下角显示...。不过有缺点，就是控制不好，可能会有半个文字显示半个文字被遮住。所以在使用的时候可以根据自己项目的实际情况做选择。