uniapp中nvue页面中设置超出显示省略号

     

css代码：
        verflow: hidden;
		word-break: break-all; /* break-all(允许在单词内换行 */
		text-overflow: ellipsis; /* 超出部分省略号 */
		-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: 4; /* 显示的行数 */
		lines:4;/* NVUE下要用这个，让文字超出固定行数隐藏变省略号 */

在nvue页面设置超出范围省略关键就这两行代码（样式需要挂载到text的标签中）
    text-overflow: ellipsis; /* 超出部分省略号 */
    lines:4; /* 超出固定行数显示省略号 */

lines:4;相当于vue页面中的（-webkit-line-clamp: 4）设置最大行数

<template>
    <view class="content">
        <text class="text">{{text}}</text>
    </view>
</template>
<script>
	export default {
		data() {
			return {
				text:"的说法就看他手道他火炬大厦附近士大夫萨芬大苏打实打实 双方的撒空手道他火炬                        大厦附近空手道他火炬大厦附近空手道他火炬大厦附近空手道解放还是反对撒就发盛大积分活动撒酒疯对数据大数据大数据都是回复技术打法和时间的话对数据是急撒发生",
				showMoreText:false,//是否显示全部个性签名文字
			}
		}
	}
</script>

<style scoped>
    .content .text{
        text-overflow: ellipsis; /* 超出部分省略号 */
        lines:4;/* //NVUE下要用这个属性，来让文字超出固定行数隐藏变省略号 */
    }
</style>