3点リーダーのVueコンポーネント

概要

指定行以上のテキストコンテンツを、隠す3点リーダーを作る。
コンポーネントのインナー要素が指定行高を超えた高さを持っていたら、
is-overflowクラスを付与して、overflow: hidden;、
after疑似要素で点を追加して、背景に色を付けることで、文字を隠す。
仕上げに文字の切れ目になる部分をグラデーションにしてごまかす。

記述

<template lang="pug">
.a-dotleader(
  :class="{ 'is-overflow': isOverflow }"
  :style="{ height: `${maxHeight}px` }"
)
  .a-dotleader-inner(ref="inner") {{ text }}
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: false,
      default: ''
    },
    spRow: {
      type: Number,
      required: false,
      default: 2
    },
    pcRow: {
      type: Number,
      required: false,
      default: 2
    }
  },
  data: () => ({
    isMobile: false,
    isOverflow: false,
    lineHeight: 19.5
  }),
  computed: {
    maxHeight() {
      return this.isMobile
        ? this.lineHeight * this.spRow
        : this.lineHeight * this.pcRow
    }
  },
  mounted() {
    this.init()
    window.addEventListener('resize', this.init)
  },
  methods: {
    init() {
      const ww = window.innerWidth
      const breakPoint = 1024
      const elInner = this.$refs.inner
      const innerHeight = elInner.clientHeight
      const style = window.getComputedStyle(elInner)
      this.lineHeight = parseFloat(style.getPropertyValue('line-height'))
      this.isMobile = ww < breakPoint
      this.isOverflow = this.maxHeight < innerHeight
    }
  }
}
</script>

<style lang="stylus" scoped>
.a-dotleader
  overflow hidden
  &.is-overflow
    position relative
    word-break break-all
    &:after
      display block
      position absolute
      content '…'
      text-align right
      right 0
      bottom 0
      width 2em
      background linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1))
</style>