效果
超出部分使用了...
代替;
原理
获取加了样式的字符串总长度,再和字符串的父容器的宽度进行比较,把超出部分使用指定内容替换;
获取字符串长度代码
/*** 获取文本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;