前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >多行文本溢出使用展开,隐藏

多行文本溢出使用展开,隐藏

作者头像
拿我格子衫来
发布2022-01-24 15:22:35
1.8K0
发布2022-01-24 15:22:35
举报
文章被收录于专栏:TopFETopFE
在这里插入图片描述
在这里插入图片描述

多行溢出组件

代码语言:javascript
复制
<template>
  <div class="multiline-overflow-wrapper">
    <input v-model="showall" class="exp" type="checkbox" />
    <div class="text" :style="textStyleObject">
      <label class="btn" @click="showall = !showall"></label>
      {{ info }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: String,
      default: '',
    },
    lineClamp: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      showall: false,
    }
  },
  computed: {
    textStyleObject() {
      return {
        '-webkit-line-clamp': this.showall ? 999 : this.lineClamp,
      }
    },
  },
  watch: {
    info() {
      this.showall = false
    },
  },
}
</script>
<style lang="less" scoped>
.multiline-overflow-wrapper {
  display: flex;
  margin: 6px 0 20px 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;

  .text {
    position: relative;
    max-height: 4.5em;
    // display: -webkit-box;
    overflow: hidden;
    line-height: 1.5;
    text-align: justify;
    text-overflow: ellipsis;
    word-break: break-all;
    transition: 0.3s max-height;
  }
  .text::before {
    float: right;
    height: calc(100% - 20px);
    content: '';
  }
  .text::after {
    position: absolute;
    width: 999vw;
    height: 999vw;
    margin-left: -100px;
    box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    content: '';
  }
  .btn {
    position: relative;
    float: right;
    clear: both;
    margin-left: 10px;
    padding: 0 8px;
    color: #206ef7;
    line-height: 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  .btn::after {
    content: '展开▽';
  }
  .exp {
    display: none;
  }
  .exp:checked + .text {
    max-height: 200px;
  }
  .exp:checked + .text::before {
    visibility: hidden;
  }
  .exp:checked + .text .btn::after {
    // content: '收起';
    content: '';
  }
  .btn::before {
    position: absolute;
    left: -5px;
    color: #333;
    transform: translateX(-100%);
    content: '...';
  }
}
</style>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档