nvue页面的text标签显示多行文本

uniapp中的nvue页面文本必须放在text标签里面，否则不能设置字体大小和颜色，且只能显示一行，如果想显示多行，则需要使用rich-text标签

text和rich-text如果需要显示省略号，可以使用lines和text-overflow属性

nvue预览图

......
<view class="item">
	<text class="name">商品名：</text>
	<rich-text 
		class="value"
		:nodes="getRichText('白鹭岛门票+小火车门票+游湖船票+灯光秀门票+君鼎酒店 白鹭岛门票+小火车门票+游湖船票+灯光秀门票+君鼎酒店 ')">
    </rich-text>
</view>
<view class="item">
	<text class="name">商品名：</text>
	<text class="value" style="lines:1;" >白鹭岛门票+小火车门票+游湖船票+灯光秀门票+君鼎酒店 白鹭岛门票+小火车门票+游湖船票+灯光秀门票+君鼎酒店</text>
</view>
......

<script>
	import HTMLParser from '@/common/html-parser'
	export default {
		data() {
			return {
			}
		},
		methods: {
            // nvue不支持直接传字符串
			getRichText(content) {
				this.content = new HTMLParser(content.trim())
				return this.content
			},
        }
    }
</script>

<style lang="scss">
	.item{
		display: flex;
		flex-direction: row;
		background-color: white;
		.name{
			font-size: 14px;
            line-height: 26px;
		}
		.value{
            font-size: 14px;
			flex: 1;
			line-height: 26px;
            // 超出两行显示省略号，如果是text标签需要设置为1
			lines:2;
			text-overflow: ellipsis;
		}
	}
</style

这种省略号写法在h5和小程序里是不会生效的，要改成如下方式：

/* #ifndef APP-PLUS */
.o-webkit-line2{
    // 超出两行显示省略号
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	word-break: break-all;
}
/* #endif */

使用该class后还需要额外设置宽或者高或者使用flex=1才会生效

<text class="value o-webkit-line2">白鹭岛门票+小火车门票+游湖船票+灯光秀门票+君鼎酒店 白鹭岛门票+小火车门票+游湖船票+灯光秀门票+君鼎酒店</text>

html-parser插件参考