js 处理文字过长,使用指定字符串内容替换超出部分文字

效果

超出部分使用了...代替；

原理

获取加了样式的字符串总长度，再和字符串的父容器的宽度进行比较，把超出部分使用指定内容替换；

获取字符串长度代码

/*** 获取文本px宽度* 
* @param font{String}: 字体样式 如 12px normal
* **/
function pxFont(font) {
  String.prototype.pxWidth = function(font) {
      // re-use canvas object for better performance
      var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas")),
          context = canvas.getContext("2d"); 
    
      font && (context.font = font);
      var metrics = context.measureText(this);
    
      return metrics.width;
    }
}

封装的ellipsis.js 返回处理好的字符串

主要用于字符串 动态适应容器大小 原字符 使用 Tooltip 文字提示显示全部;

/*
* @Descripttion: 
* @version: 
* @Author: HHH
* @Date: 2020-12-02 16:34:08
* @LastEditors: HHH
* @LastEditTime: 2020-12-08 17:30:05
*/



/**
* @name:  用于处理字符串过长问题 ，省略字符串
* @test: test font
* @msg: 
* @param {*} container  字符串父容器元素  （用于获取字符串父容器宽度,从而判断是否需要加省略字符串） 
* @param {*} fontDom  字体容器元素     （用于获取字符串样式 从而确定字符串宽度）
* @param {*} string  字体 字符串
* @param {*} subString 替代过长字符串的 字符串;
* @return {*} resString 返回处理好的字符串
*/
function ellipsis(container,fontDom,string,subString='...'){
  let fontGetComputedStyle =  window.getComputedStyle(fontDom);

  let fontStyle = `${fontGetComputedStyle.fontStyle} ${fontGetComputedStyle.fontSize} ${fontGetComputedStyle.fontFamily}`;
  pxFont(fontStyle);
  // console.error("pxWidth",'-'.pxWidth(fontStyle), '1'.pxWidth(fontStyle),'A'.pxWidth(fontStyle),'字'.pxWidth(fontStyle));
  let resString = ''; //返回处理好的字符串
  let conWidth =0;  //字符串父容器元素宽度;
  // let subString='...'; //替代过长字符串的 字符串;
  let stringWidth = String(string).pxWidth(fontStyle);
  if(container){
    conWidth =   window.getComputedStyle(container).width.split("px")[0]
  }
  // console.log('conWidth',conWidth,'stringWidth',stringWidth);
  if(conWidth< stringWidth && conWidth){
      let stringArray = string.split('');
      let stringArrayLength =stringArray.length;
      let stringArrayEnd  = [];
      let startWidth =0;
      for(var i = 0;i<stringArrayLength;i++){
          if(startWidth<conWidth){
              startWidth +=stringArray[i].pxWidth(fontStyle);
              stringArrayEnd.push(stringArray[i]);
          }else{
              break;
          }
      }
      let startLength  = stringArrayEnd.join('').pxWidth(fontStyle);
      resString = callback(startLength,stringArrayEnd,subString,fontStyle);
      // console.error('callback',resString);
  }else{
      resString = string;
  }
  console.log('原字符串string',string);
  console.log('处理后的字符串resString',resString);
  return resString;
}

/**
* @name: 
* @test: test font
* @msg: 
* @param {*} startLength  stringArray的初始长度
* @param {*} stringArray 字符串数组
* @param {*} subString 替代字符串
* @param {*} fontStyle 字符串样式
* @return {*} resString 返回处理好的字符串
*/
function callback(startLength,stringArray,subString,fontStyle){
  let resString = ''; //返回处理好的字符串
  let strArray =stringArray; //赋值 不改变原参数
  let strArrayLength = strArray.length;
  let string = strArray.join('');
  let stringWdith = Number(string.pxWidth(fontStyle));
  let endString = stringWdith + Number(subString.pxWidth(fontStyle));
  // 当字符串拼接替代字符串后的长度大于原字符串 则 删除尾部一字 并递归
  if(startLength<endString){
      strArray.splice(strArrayLength-1,1);
      return callback(startLength,strArray,subString,fontStyle)
  }else{
      strArray.push(subString);
      resString = strArray.join('');
  }
  return resString;
}

/*** 获取文本px宽度* 
* @param font{String}: 字体样式 如 12px normal
* **/
function pxFont(font) {
  String.prototype.pxWidth = function(font) {
      // re-use canvas object for better performance
      var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas")),
          context = canvas.getContext("2d"); 
    
      font && (context.font = font);
      var metrics = context.measureText(this);
    
      return metrics.width;
    }
}

export default ellipsis;