Vue2.0 组件文本超出3行显示... 点击查看更多可以查看全部内容(展开收起)

效果

<template><div ref="txttype" class="bottom"><div :class="hidetext==true?'room_intro showEllipsis':'room_intro'">{{content}}</div><span class="btnWrap" v-if="nomore" @click="lookmore"><a class="more">{{moretext}}<i :class="hidetext==false?'el-icon-arrow-up':'el-icon-arrow-down'"></i></a></span></div>
</template><script>export default ({name: 'ellipsisText',props: {//父组件传过来的文本content: {type: String,default: ''},},data() {return {moretext: '查看更多',nomore: true,hidetext: false,}},mounted() {//通过ref获取对应dom节点的高度，注意20为单行时的高度let hei = this.$refs.txttype.clientHeight;//当获取的高度大于20时，即当前文本为多行，设置添加收起文本的class，//当获取的高度等于20时，隐藏查看更多按钮if (hei > 20) {this.hidetext = truethis.nomore = true} else if (hei == 20) {this.nomore = false}},methods: {//查看更多lookmore() {this.hidetext = !this.hidetextthis.moretext = this.hidetext == true ? '查看更多' : '收起'},}})
</script><style lang="scss" scoped>.bottom {margin-top: 12px;position: relative;// .Flex();.room_intro {flex:1;font-size: 14px;font-weight: 400;line-height: 20px;text-align: justify;}.showEllipsis{ // 文本溢出超出两行显示省略号overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;}.btnWrap {align-self: flex-end;cursor: pointer;}}
</style>

Vue2.0 组件文本超出3行显示... 点击查看更多可以查看全部内容(展开收起)相关推荐

使用CSS样式设置文本超出2行显示为省略号
设置文本超出2行显示为省略号在设计前端页面中,我们经常会遇到文本太长导致超出规定区域的情况. 我们只需要在文本中设置以下样式即可解决该问题: html页面: <div class=" ...
文本超出多行显示省略号移动端禁止双击缩放
文本超出两行显示省略号移动端禁止双击缩放单行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 多行省略 displ ...
css 文本超出2行显示点点点
.product-name {// height: 45px;// word-break: break-all;// text-overflow: ellipsis; // text-overflow ...
安卓超过两行就加省略号_CSS文本超出2行就隐藏并且显示省略号
超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行但是 ...
文本超出部分省略号显示
uni-app 文本超出部分省略号显示今日在将文本超出部分省略号显示问题上遇到困难,从网上找到解决方法.特此记录便于日后查阅. text {overflow: hidden;text-overflo ...
文本超出隐藏并显示省略号
文本超出隐藏并显示省略号单行 overflow: hidden;text-overflow: ellipsis;white-space: nowrap; 多行 overflow: hidden;te ...
vue2.0 之文本渲染-v-html、v-text
vue2.0 之文本渲染-v-html.v-text 1.index.html代码 <!DOCTYPE html> <html><head><meta cha ...
vue将文本渲染html,vue2.0 之文本渲染-v-html、v-text
vue2.0 之文本渲染-v-html.v-text 1.index.html代码 vuedemo 2.main.js代码 import Vue from 'vue' import App from ...
css实现文本超出宽度省略号显示
2019独角兽企业重金招聘Python工程师标准>>> 单行文本超出宽度省略号显示 .text {width:20px;overflow:hidden;text-overfolw:e ...

Vue2.0 组件文本超出3行显示... 点击查看更多可以查看全部内容(展开收起)

Vue2.0 组件文本超出3行显示... 点击查看更多可以查看全部内容(展开收起)相关推荐

最新文章

热门文章