JS控制超出部分省略

在移动端css控制超出部分省略，由于设置了宽度，中文和英文的字符宽度不一样，省略号会出现被吃掉一个或半个掉情况。至于CSS控制超出部分省略，出门百度有很多方法。这里总结下js控制超出部分省略的方法。

具体的思路就是要截取文字的内容，然后使用substring截取一定的字数然后加上...，尽量放宽截取的字数，保证所有的都字符都能兼容。然后使用innerText重新赋值给这个文字内容。

    /**
     * [cutString 超出部分用省略号显示]
     * @param  {[String]} tagName [标签的名称]
     * @param {[String]} type [标签的类型]
     */
    cutString (tagName, type) {
      var text2 = ''
      var objList = {}
      if (type === 'select') {
        objList = this.$refs.newsList.getElementsByTagName(tagName)
      } else {
        objList = this.$refs.homeroot.getElementsByTagName(tagName)
      }
      for (let i = 0; i < objList.length; i++) {
        if (objList[i].innerText.length > 17 && tagName === 'h3') {
          text2 = objList[i].innerText.substring(0, 17) + '...'
          objList[i].innerText = text2
        } else if (tagName === 'p' && objList[i].className === 'p-left' && objList[i].innerText.length > 11) {
          text2 = objList[i].innerText.substring(0, 11) + '...'
          objList[i].innerText = text2
        } else if (tagName === 'p' && objList[i].className === 'p-bottom' && objList[i].innerText.length > 45) {
          text2 = objList[i].innerText.substring(0, 45) + '...'
          objList[i].innerText = text2
        }
      }
    }

由于这个代码是在vue中使用的。所以我需要在数据加载结束调用这个方法。

this.$nextTick(() => this.cutString('p', 'select'))