uniapp中如何用css实现文本溢出2行显示省略号

在uniapp中，可以使用以下CSS样式实现文本溢出2行显示省略号：

.text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

其中，`-webkit-box`属性设置为`display`，可以将文本作为一个弹性伸缩盒子来显示；`-webkit-line-clamp`属性设置为`2`，可以指定显示的文本行数为2行；`-webkit-box-orient`属性设置为`vertical`，可以将文本在垂直方向上显示；`overflow`属性设置为`hidden`，可以隐藏超出文本框的内容；`text-overflow`属性设置为`ellipsis`，可以在文本溢出时显示省略号。

将以上样式应用到需要溢出省略的文本元素上即可。例如：

<view class="text">这里是需要溢出省略的文本</view>

相关问题

uniapp小程序文本动态溢出显示省略号

在Uniapp小程序中，如果需要实现文本动态溢出显示省略号的效果，可以使用CSS样式来实现。引用提供了一种可行的方法，可以设置以下样式属性来实现这个效果:
1. 设置`overflow: hidden;`来隐藏超出父容器的文本。
2. 使用`text-overflow: ellipsis;`来显示省略号。
3. 使用`display: -webkit-box;`和`-webkit-line-clamp: 2;`来限制文本的行数。其中`-webkit-line-clamp`设置的值表示行数，可以根据需要进行调整。
4. 使用`-webkit-box-orient: vertical;`来设置文本为垂直方向排列。

这样，通过给文本添加这些样式，就可以实现动态溢出显示省略号的效果了。中提到的办法。即，在接口返回的富文本外层套一层div盒子，并在div盒子上添加行内样式，设置相同的样式属性，例如:`overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-break: break-all;`。然后再进行真机测试，看看是否能够实现文本动态溢出显示省略号的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [小程序富文本多行文本溢出显示省略号真机IOS无效问题](https://blog.csdn.net/weixin_48772762/article/details/122621968)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [微信小程序使用多行文本溢出显示省略号样式失败问题](https://blog.csdn.net/weixin_44801790/article/details/130768182)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

帮我用uniapp框架，实现如下功能，当文本内容多于两行时多出的部分溢出隐藏显示省略号，点击按钮，显示溢出隐藏去掉省略号

好的，我明白了。以下是我对你的回答：

可以使用uniapp的字符串截取函数来实现这一功能。具体的实现方式如下：

1. 在需要隐藏显示省略号的文本区域中，设置一个固定的高度，超出这个高度的文本将被隐藏。

2. 使用uniapp的字符串截取函数，将文本按照显示区域的高度进行截取，保留显示部分，其他部分用省略号代替。

3. 在文本区域下方添加一个按钮，当用户点击该按钮时，显示隐藏的部分文本，并去掉省略号。

代码示例：

//html
<template>
<div class="text-box">
<div class="text">{{text}}</div>
<div class="button" @click="showMore">{{buttonText}}</div>
</div>
</template>

//css
<style scoped>
.text-box {
position: relative;
height: 50px;//设置文本区域的固定高度
overflow: hidden;//超出高度的文本隐藏
}
.text-box.show {
height: auto;//点击按钮时，文本区域高度自适应
}
.text {
line-height: 25px;//根据需求设置相应的行高
font-size: 14px;//文本大小也可以根据需求进行设置
overflow: hidden;
text-overflow: ellipsis;//省略号
-webkit-line-clamp: 2;//根据需求设置显示的行数
display: -webkit-box;
-webkit-box-orient: vertical;
}
.button {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 25px;//根据需求设置按钮的高度
background-color: #fff;//按钮背景颜色
text-align: center;
line-height: 25px;
border-top: 1px solid #ccc;//按钮上方添加一条分割线
}
</style>

//js
<script>
export default {
data() {
return {
text: '这是一段很长的文本内容，当文本内容多于两行时多出的部分溢出隐藏显示省略号。',
buttonShow: false
}
},
computed: {
buttonText() {
return this.buttonShow ? '收起' : '展开';
}
},
methods: {
showMore() {
this.buttonShow = !this.buttonShow;
let textBox = this.$el.querySelector('.text-box');
textBox.classList.toggle('show');
}
}
}
</script>