隐藏超长文本（操作字符串， 首部隐藏 中间隐藏 尾部隐藏）

      制作需求中，尤其是H5的制作，很多标题难免有输入很长，又要一行展示完成。就要用到隐藏超长文本的功能。尾部隐藏展示...是大家最常用到的功能样式。overflow: hidden;  超长隐藏   white-space: nowrap; 不换行，全部展示  text-overflow: ellipsis; 超长显示... 

      你以为这样就结束了？  那就错了， 在业务的使用过程中，可能首部都是一样的，而重要的信息在尾部，这时我们可能就要隐藏首部，或者对中间进行隐藏。 这时就不能使用以上的样式了，固在下面写了一个操作字符串的功能。

 废话不多说先上代码

/**
 * @method textEllipsis() 隐藏超长字符
 * @param val 文字内容
 * @param offsetWidth 文字框宽度
 * @param type left: 左侧隐藏  center:中间隐藏 right尾部隐藏 默认尾部
 */
export function textEllipsis (val, offsetWidth, type, size) {
  let data = val
  // 生成一个span标签  要用span 用div的话， 宽度计算有问题会很宽
  const spanElement = document.createElement('span') 
  spanElement.innerHTML = val // 给span赋值
  spanElement.style.font = (size && `${size}px`) || '14px';
  // 生成一个已字符串为内容的span标签用于计算字符串原本所占用的宽度
  document.body.appendChild(spanElement); 
  let ellipsis = getEllipsis(size) // 获取... + 一个中文字符的宽度， 防止计算的宽度不够
  // 做一个小的性能优化，如果不满足的话直接return
  if (spanElement.offsetWidth + ellipsis < offsetWidth) return val
  // 用于隐藏中间或者尾部的字符串
  let start = type == 'center' ? Math.floor(val.length / 2) : val.length
  let end = type == 'center' ? start + 1 : 0 // 用于隐藏中间或者首部的字符串
  let rank = true // center的时候 为true去除前面的字符， false去除后面的字符
  while (spanElement.offsetWidth + ellipsis > offsetWidth) {
    data = data.split('...').join('') // 去除...
    if (type == 'left') {
      data ='...' + data.slice(1)
    } else if (type == 'center') {
      rank ? start -- : end ++
      rank = !rank
      // 循环去除 左面去除一个， 右面去除一个
      data = data.slice(0, start) + '...' + data.slice(end);
    } else {
      start--
      data = data.slice(0, start) + '...'
    }
    spanElement.innerHTML = data // 给span赋值
  }
  document.body.removeChild(spanElement);
  return data
}


const getEllipsis = ((size) => {
  const spanElement = document.createElement('span')
  spanElement.innerHTML = '...' // 给span赋值
  spanElement.style.font = (size && `${size}px`) || '14px';
  document.body.appendChild(spanElement);
  let width = spanElement.offsetWidth
  document.body.removeChild(spanElement);
  return width + (size || 13) // 加一个文字的宽度
})

以上核心思路（这里使用export， 方法放在了公共JS当中。）

1.首先先拿到页面中容器的宽度，在拿到要展示的文字内容（记住这里是真的操作了字符串，后续逻辑处理和页面展示不要使用一个变量容纳）

2.先生成一个span标签，然后把要展示的字符串进行赋值，这里要进行文字大小的设定。然后计算出当前字符串要占用的空间（这里要加上...和一个中文的宽度，才会导致计算出来的数据正确无误。调用的方法是getEllipsis）

3.计算完成后与当前容器的宽度做比较，如果超出，那说明要对超长的部分进行隐藏。

4.start 当隐藏center的时候，要取中间的部分。其他用到的时候right，就要取字符串的长度，一点点的减少。

5.end 当隐藏center的时候的时候，取start+1，以供start去除一位，end去除一位形成中部隐藏的效果。

6.使用while循环， 知道逻辑处理符合字符串暂用长度比容器的宽度窄的时候，就可以return出当前的字符串了。

 以上就是该功能的描述，不清除的也可以在评论区说，我会进行回复。还是很好玩的小功能。