uniapp中的nvue页面文本必须放在text标签里面，否则不能设置字体大小和颜色，且只能显示一行，如果想显示多行，则需要使用rich-text标签
text和rich-text如果需要显示省略号，可以使用lines和text-overflow属性
......
<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插件参考
