js多行省略兼容常用浏览器

<template>

  <div id="app1">


    <p ref="word" :id="'overflowhidden'+index" v-for="(item,index) in data">{{subWord('overflowhidden'+index, 3, item)}}</p>


  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        data: null,
      }

    },
    created() {

    },
    mounted() {

      let self = this;
      setTimeout(function () {
        self.data = ['S处理的基本思路是获取到文本中设置的line-height属性。在获取到相关属性后，根据传入的显示行数来计算整个文本的高度。A package is a combination of metadata, configuration, and software that is prepared in a way that a package management program (for example: apt on Ubuntu, yum on Redhat Enterprise Linux, pip for Python packages and gem for RubyGems) can use to properly and reliably install software and related configuration data on a computer.', 'h处理的基本思路是获取到文本中设置的line-height属性。在获取到相关属性后，根据传入的显示行数来计算整个文本的高度。A package is a combination of metadata, configuration, and software that is prepared in a way that a package management program (for example: apt on Ubuntu, yum on Redhat Enterprise Linux, pip for Python packages and gem for RubyGems) can use to properly and reliably install software and related configuration data on a computer.', 'k处理的基本思路是获取到文本中设置的line-height属性。在获取到相关属性后，根据传入的显示行数来计算整个文本的高度。A package is a combination of metadata, configuration, and software that is prepared in a way that a package management program (for example: apt on Ubuntu, yum on Redhat Enterprise Linux, pip for Python packages and gem for RubyGems) can use to properly and reliably install software and related configuration data on a computer.'];
      }, 1000)
    },
    methods: {

      subWord(id, rows, str) {
        if (!str || str == '') {
          return ''
        }
        this.$nextTick(function () {
          var text = document.getElementById(id);
          var lineHeight = 24;   //获取到line-height样式设置的值 必须要有
          var at = rows * parseInt(lineHeight);      //计算包含文本的div应该有的高度
          var tempstr = str;                       //获取到所有文本
          text.innerHTML = tempstr;                //将所有文本写入html中
          var len = tempstr.length;
          var i = 0;
          if (text.offsetHeight <= at) {             //如果所有文本在写入html后文本没有溢出，那不需要做溢出处理
            /*text.innerHTML = tempstr;*/
          }
          else {                                   //否则 一个一个字符添加写入 不断判断写入后是否溢出
            var temp = "";
            text.innerHTML = temp;

            while (text.offsetHeight <= at) {

              temp = tempstr.substring(0, i + 1);
              i++;
              text.innerHTML = temp;
              /*console.log(temp,text.offsetHeight , at)*/
            }
            var slen = temp.length;
            tempstr = temp.substring(0, slen - 1);
            len = tempstr.length
            text.innerHTML = tempstr.substring(0, len - 3) + "...";     //替换string后面三个字符
            text.height = at + "px";                                  //修改文本高度 为了让CSS样式overflow：hidden生效
          }
        })


      },

    },
  }
</script>

<style scoped lang="less">
  * {
    padding: 0;
    margin: 0;
  }

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  a {
    text-decoration: none;
  }

  .clearfix:before,
  .clearfix:after {
    content: ' ';
    display: table;
  }

  .clearfix:after {
    clear: both;
  }

  input {
    outline: none;
  }

  ol,
  ul {
    list-style: none;
  }

  body {
    padding: 20px;
  }

  #app1 {
    line-height: 24px;
    p {
      margin: 40px auto;
      width: 400px;
      line-height: 24px;
      font-size: 12px;
    }
  }

</style>