JSFiddle - React, Tailwind, and code Playground

by Chen Huiting

HTML

<div id="app">
      <div class="box" v-autoSuffix >
        <span class="stuffix left"></span>
        {{text}}
        <span class="stuffix right"></span>
      </div>
  </div>

CSS

body{
  margin:0;
  background: #fff;
}


.box{
  width:200px;
  margin:100px auto;
  border:1px solid #ccc;
  word-break: break-all;
  overflow:hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position:relative;
}

.stuffix{
  height:30px;
  display:inline-block;
  background: #fff no-repeat right;
  padding-right:30px;
}

.left{
  background-image:url(http://wx2.sinaimg.cn/mw690/0060lm7Tly1furu1gg2i0j300u00sq2p.jpg);
}

.right{
  position:absolute;
  background-image:url(http://wx4.sinaimg.cn/mw690/0060lm7Tly1furu1jz98qj300u00sq2p.jpg);
}

Vue

function positionOfBoxBottom(el){
  return Vue.nextTick().then(()=>{
    return parseInt(window.getComputedStyle(el).bottom)
  })
}

new Vue({
  el:'#app',
  data(){
    return {
      text:"hello world"
    }
  },
  directives: {
    autosuffix: {
      update: function (el) {
        const span = el.querySelector('.right')
        positionOfBoxBottom(span).then(x=>{
          console.log(x)
          if(x < -8){
            span.style.right = 0;
            span.style.bottom = '-5px';
            span.innerText = '...'
          }
        })
      }
    }
  },
  mounted(){
    setTimeout(()=>{
      this.text = "dfvkghkhhjkg9789789789789hgjghjghjljfvkghkhhjkg9789789789789hgjghjg" 
    },200)
  }
})