vue3项目中文字太多超过3行显示省略号和查看更多按钮 |
您所在的位置：网站首页 › 省略两字怎么写 › vue3项目中文字太多超过3行显示省略号和查看更多按钮 |
vue3项目中文字太多超过3行显示省略号和查看更多按钮
|
项目中设计的介绍文字较多，需求是超过三行显示省略号和查看更多按钮，这种看似简单，写起来也需要花费些心思，效果和主要代码如下：
1.试图部分 查看更多 {{ baseData.desc }} {{ baseData.desc }}2.判断内容高度是否显示查看更多按钮 nextTick(() => { // 判断div的高度是否显示按钮 if (textMore.value.clientHeight >= myDiv.value.clientHeight) { isMore.value = 1 } else { isMore.value = 0 } })3.点击查看更多按钮展示全部内容 const isAll = ref(0) const lookmore = () => { isAll.value = 1 }4.css相关 .yuanqu-con { width: 1139px; font-size: 14px; color: #202332; /* line-height: 22px; */ .text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .text::before { content: ''; float: right; height: 43px; /*先随便设置一个高度*/ background: #fff; } /* .text::after { content: ''; width: 100%; height: 65px; position: absolute; background: #fff; } */ .btn { float: right; clear: both; cursor: pointer; color: #4876ff; } } } |
【本文地址】
今日新闻 |
推荐新闻 |