HTML/小程序 text 限制行数，超出显示省略号--小坑记录

首先，关于单行超出省略代码：

.content{
    text-decoration:underline; //下划线

    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

和多行省略代码：

	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:4; //设置行数
    overflow: hidden;

这些代码网上一搜都有也很好用。

但是今天使用的时候遇到一个小坑导致多行省略超出的部分显示了

变成了这个鬼样子。 省略号是显示了，但超出的文字也出来了。虽然可以修改text的高度把它遮掉，但不同手机，屏幕大小不一样又会有新问题。

经过摸索发现，给text标签外加一层div（HTML）或view（小程序）就可以了`

<div class="F-content">
	<text class="content" space="ensp">{{item.content}}</text>
</div>`

然后将text的需要的宽高赋值给父级

.F-content{
    height: 200rpx;
    width: 55%;
}
.content{
    /* height: 200rpx;
    width: 55%; */
    text-decoration:underline;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:4;
    overflow: hidden;

}

就是想要的样子啦