uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）

一、uni-app中，固定宽高，文字超出部分，隐藏并显示省略号。

.topic_cont_text{padding: 30upx;colof: #999;background: #E1FFFF;max-height: 130upx;overflow: hidden;word-break: break-all;  /* break-all(允许在单词内换行。) */text-overflow: ellipsis;  /* 超出部分省略号 */display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/-webkit-line-clamp: 3; /** 显示的行数 **/}

二、实现展开、收起全文

<view class="topic_content"><view class="topic_cont_text"><template v-if="showText">{{topicDetail.description}}<text v-if="topicDetail.description !== null && topicDetail.description.length > 140" class="full_text" @click="toggleDescription">收起</text></template><template v-else>{{topicDetail.description.substr(0, 140)}}<text v-if="topicDetail.description !== null && topicDetail.description.length > 140" class="full_text" @click="toggleDescription">全文</text></template></view>
</view>// 全文展开收起
toggleDescription (num) {this.showText = !this.showText
},

uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）相关推荐

文字溢出隐藏并显示省略号--CSS省略号
单行文本文字超出隐藏并显示省略号: .box {white-space: nowrap;text-overflow:ellipsis;overflow:hidden; } 多行文本(展示2行)文字超出 ...
文本超出隐藏并显示省略号
文本超出隐藏并显示省略号单行 overflow: hidden;text-overflow: ellipsis;white-space: nowrap; 多行 overflow: hidden;te ...
适配移动端的文字超出隐藏并添加省略号
overflow: hidden;text-overflow: ellipsis;white-space: normal !important;display: -webkit-box;-webkit ...
CSS 文字超出长度的显示省略号的方法总结
text-overflow text-overflow 语法: text-overflow : clip | ellipsis 取值: clip: 不显示省略标记(...),而是简单的裁切. elli ...
css文字超出盒子宽度显示省略号
单行超出显示省略号 white-space:nowarp; overflow:hidden; text-overflow:ellipsis; 超出两行显示省略号 overflow: hidden;te ...
html超出部分显示隐藏,CSS文字超出部分隐藏并显示省略号
下面是编程之家 jb51.cc 通过网络收集整理的代码片段.编程之家小编现在分享给大家,也给大家做个参考. 网站前端开发中 web 网页中文字超出了需要隐藏,并显示省略号这个在工作中很多时候都要用到, ...
VUE ElementUI中table框设置文字超出隐藏及设置提示框样式
当表格中某单元格的文字内容过多时,table中的每行的行高不一致导致风格不统一,这时需要用到ElementUI中table自带的属性show-overflow-tooltip使其内容均在一行显示,超出 ...
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
在td标签中文字超出显示省略号，鼠标悬停显示所有文本
在td标签中文字超出显示省略号,鼠标悬停显示所有文本首先得在table的style中加入table-layout:fixed,让表格固定,然后用width设定表格的宽度. 然后表格中所有的列都一样宽 ...

uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）

uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）相关推荐

最新文章

热门文章