vue 多行溢出兼容ie

最新推荐文章于 2024-08-06 14:05:31 发布

lucasxt

最新推荐文章于 2024-08-06 14:05:31 发布

阅读量349

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/lucasxt/article/details/106862010

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<div class="desc" ref="desc" :class="{'desc-more':hasMore}"></div>
<script>
export default {
...
  data: function() {
    return {
    hasMore: false
    }
  },
   mounted: {
    this.$nextTick(() => {
        if (this.$refs.desc.scrollHeight > 32) {
          this.hasMore = true
        }
      })
}
</script>
<style scoped lang="scss">
 .desc {
        font-size: 16px;
        color: #666666;
        line-height: 16px;
        max-height: 32px;
        overflow: hidden;
        position: relative;
      }
      .desc-more::after {
        content: " ... ";
        position: absolute;
        bottom: 0;
        right: 0;
        padding-left: 10px;
        background: linear-gradient(to right, transparent, #fff 55%);
      }
</style>