一行的写法
效果如下图
一行的效果图
代码如下
.one {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<view class="one">这里是一行的文字，有很多内容我需要超出部分显示成省略号</view>
一行的实现比较简单，首先控制文本不换行，然后超出部分隐藏，最后设置文本溢出的样式。
多行的写法
效果图如下
多行的效果图
代码实现如下
.introduction {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
<view class="introduction">这里是多行的文字，有很多内容我需要超出部分显示成省略号，这里是多行的文字，有很多内容我需要超出部分显示成省略号，这里是多行的文字，有很多内容我需要超出部分显示成省略号</view>
多行的实现就稍微麻烦了一点，会需要使用到一些结合属性。
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;
}
<view class="stable">
这里是多行的文字，有很多内容我需要超出部分显示成省略号，这里是多行的文字，有很多内容我需要超出部分显示成省略号，这里是多行的文字，有很多内容我需要超出部分显示成省略号
</view>
这种写法就兼容性比较好，主要的实现思路就是控制显示区域的宽高，然后通过伪元素在右下角显示...。不过有缺点，就是控制不好，可能会有半个文字显示半个文字被遮住。所以在使用的时候可以根据自己项目的实际情况做选择。
