判断文本在固定宽度的节点中是否溢出（可配合tooltip）

判断单行文本长度方法：

/**
 * 方法一
 * 判断单行文本是否过长
 * @param {String | Number} width
 * @param {String} dom
 * @param {Object} styleObj
 * @returns {Boolean} true: disabled
 */
function getTooltipDisabled1(width, dom, styleObj) {
  var range = document.createRange()
  range.setStart(dom.childNodes[0], 0)
  range.setEnd(dom.childNodes[0], dom.childNodes[0].length)
  const rangeWidth = range.getBoundingClientRect().width
  // 视情况添加
  const padding = styleObj.getPropertyValue('paddingLeft') + styleObj.getPropertyValue('paddingRight')
  const w = rangeWidth + padding
  return w < width
}

/**
 * 方法二
 * 判断单行文本是否过长
 * @param {String} text
 * @param {String | Number} width
 * @param {String | Array} className
 * @param {Object} styleObj
 * @returns {Boolean} true: disabled
 */
function getTooltipDisabled2(text, width, className, styleObj) {
  const html = document.createElement('span')
  const w = html.offsetWidth
  html.innerText = text
  if (Array.isArray(className)) {
    html.className = className.join(' ')
  }
  if (typeof className === 'string') {
    html.className = className
  }
  if (Object.prototype.toString.call(styleObj) === '[object Object]') {
    for (const key in styleObj) {
      html.style[key] = styleObj[key]
    }
  }
  document.querySelector('#app').appendChild(html)
  document.querySelector('#app').removeChild(html);
  return w < width
}

通用配置：

/**
 * 判断tooltip实际方法
 * @param {String} text
 * @param {String} id 参照id
 * @returns {Boolean} true: disabled
 */
function judgeDisabled(text, id) {
  if (document.querySelector(`#${id}`)) {
    const width = document.querySelector(`#${id}`).clientWidth
    // 仅取用style即可，class视情况取用
    const className = document.querySelector(`#${id}`).className
    const style = window.getComputedStyle(document.querySelector(`#${id}`))
    return getTooltipDisabled1(width, document.querySelector(`#${id}`), style)
    // 此处仅取常规情况下的文字样式
    // return getTooltipDisabled2(text, width, className, {
    //   fontSize: style.fontSize,
    //   fontFamily: style.fontFamily,
    //   fontWeight: style.fontWeight
    // })
  }
  return false
}

在Vue项目中使用ref则需要考虑ref是否为循环下生成的

/**
* 判断el-tooltip是否提示
* @param {String} text
* @param {String} ref 参照dom
* @returns {Boolean} true: disabled
*/
judgeDisabled(text, ref) {
  if (this.$refs[ref]) {
    let width
    let className
    let style
    if (Array.isArray(this.$refs[ref])) {
      width = this.$refs[ref][0].clientWidth
      // className = this.$refs[ref][0].className
      style = window.getComputedStyle(this.$refs[ref][0])
      return getTooltipDisabled1(width, this.$refs[ref][0], style)
    } else {
      width = this.$refs[ref].clientWidth
      // className = this.$refs[ref].className
      style = window.getComputedStyle(this.$refs[ref])
      return getTooltipDisabled1(width, this.$refs[ref], style)
    }
    // 此处仅取常规情况下的文字样式
    // return getTooltipDisabled2(text, width, className, {
    //   fontSize: style.fontSize,
    //   fontFamily: style.fontFamily,
    //   fontWeight: style.fontWeight
    // })
  }
  return false
}

此处以element-ui的tooltip为例：

<template>
 <div class="container">
  <el-tooltip
    effect="dark"
    placement="top"
    :disabled="judgeDisabled(text, 'tooltip')"
    :content="text"
  >
    <div ref="tooltip" class="inner-tooltip">{{ text }}</div>
  </el-tooltip>
 </div>
</template>
<script>
...
 methods: {
    judgeDisabled(text, ref) {...}
 }
...
</script>
<style>
.container{
  width: 200px;
  .inner-tooltip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

判断多行文本是否溢出：

/**
 * 判断多行文本是否过长
 * @param {String} text
 * @param {String | Number} domWidth
 * @param {String | Number} height
 * @param {Object} styleObj
 * @returns {Boolean} true: disabled
 */
function getTooltipDisabled(text, domWidth, height, styleObj) {
  // 多行文本溢出思路：比较换行文本全显示下高度是否大于页面设定行数的高度
  let h
  const html = document.createElement('div')
  html.innerText = text
  html.style.width = domWidth
  html.style.fontSize = styleObj.fontSize
  html.style.fontFamily = styleObj.fontFamily
  html.style.fontWeight = styleObj.fontWeight
  html.style.wordBreak = styleObj.wordBreak
  html.style.whiteSpace = styleObj.whiteSpace
  document.body.appendChild(html)
  h = html.offsetHeight
  document.body.removeChild(html);
  return h < height
}

多行文本与单行文本思路大同小异，均可添加换行dom，从而比较高度。