- 思路
- JS 代码实现
- CSS 代码实现
- 1、 js 判断文字被溢出隐藏的几种方法
- 1.1 Element-plus 这个 UI 框架中的表格组件实现的方案。
- 1.2 创建一个隐藏的 div 模拟实际宽度
- 1.3 创建一个 block 元素来包裹 inline 元素
- 1.4 使用 canvas 中的 measureText 方法和 TextMetrics 对象来获取元素的宽度
- 2、JS 获取字符串长度的几种常用方法
最近做项目，产品产品提出一个需求：要求当用户点击按钮进入详情页面时，如果详情页内的卡片标题内容过长时，标题的前后两端可以正常展示，而中间用省略号…表示，并且鼠标悬浮后，展示全部内容。
这个小功能说实在的实现起来废了鄙人的点脑细胞，所以有必要记录一下，既是作为一个笔记教程为自己实现的一个总结，也希望为其他小伙伴作为参考，何乐而不为呢。
本文主要写关于实现中间省略号…的代码，对于鼠标悬浮展示全部内容的代码就不放在这里了，感兴趣的小伙伴可以下去试着实现一下。
思路
- 获取标题盒子的真实宽度，我用的是 clientWidth；
- 获取文本内容所占的实际宽度；
- 根据文字的大小计算出每个文字所占的宽度；
- 判断文本内容的实际宽度是否超出了标题盒子的宽度；
- 通过文字所占的宽度累加之和与标题盒子的宽度做对比，计算出要截取位置的索引；
- 同理，文本尾部的内容需要翻转一下，然后计算索引，截取完之后再翻转回来；
JS 代码实现
html 代码：
<div id="test">空对着山中高士晶莹雪，终不忘世外仙姝寂寞林。叹人间，美中不足今方信；纵然是齐眉举案，到底意难平。</div>
javascript 代码：
获取标题盒子的宽度时要注意，如果在 css 样式代码中设置了 padding，就需要获取标题盒子的左右 padding 值。 通过getComputedStyle属性获取到所有的 css 样式属性对应的值，由于获取的 padding 值都是带具体像素单位的，比如: px，可以用 parseInt 特殊处理一下。
判断文本内容是否超出标题盒子
// 标题盒子 dom
const dom = document.getElementById('test');
// 获取 dom 元素的 padding 值
function getPadding(el) {
const domCss = window.getComputedStyle(el, null);
const pl = Number.parseInt(domCss.paddingLeft, 10) || 0;
const pr = Number.parseInt(domCss.paddingRight, 10) || 0;
console.log('padding-left:', pl, 'padding-right:', pr);
return {
left: pl,
right: pr
}
}
// 检测 dom 元素的宽度，
function checkLength(dom) {
// 创建一个 Range 对象
const range = document.createRange();
// 设置选中文本的起始和结束位置
range.setStart(dom, 0),
range.setEnd(dom, dom.childNodes.length);
// 获取元素在文档中的位置和大小信息,这里直接获取的元素的宽度
let rangeWidth = range.getBoundingClientRect().width;
// 获取的宽度一般都会有多位小数点，判断如果小于 0.001 的就直接舍掉
const offsetWidth = rangeWidth - Math.floor(rangeWidth);
if (offsetWidth < 0.001) { rangeWidth = Math.floor(rangeWidth); } // 获取元素 padding 值 const { left, right } = getPadding(dom); const paddingWidth = left + right; // status：文本内容是否超出标题盒子； // width: 标题盒子真实能够容纳文本内容的宽度 return { status: paddingWidth + rangeWidth > dom.clientWidth,
width: dom.clientWidth - paddingWidth
};
}
通过 charCodeAt 返回指定位置的字符的Unicode编码, 返回的值对应 ASCII 码表对应的值，0-127 包含了常用的英文、数字、符号等，这些都是占一个字节长度的字符，而大于 127 的为占两个字节长度的字符。
截取和计算文本长度
// 计算文本长度，当长度之和大于等于 dom 元素的宽度后，返回当前文字所在的索引，截取时会用到。
function calcTextLength(text, width) {
let realLength = 0;
let index = 0;
for (let i = 0; i < text.length; i++) { charCode = text.charCodeAt(i); if (charCode >= 0 && charCode <= 128) { realLength += 1; } else { realLength += 2 * 14; // 14 是字体大小 } // 判断长度，为 true 时终止循环，记录索引并返回 if (realLength >= width) {
index = i;
break;
}
}
return index;
}
// 设置文本内容
function setTextContent(text) {
const { status, width } = checkLength(dom);
let str = '';
if (status) {
// 翻转文本
let reverseStr = text.split('').reverse().join('');
// 计算左右两边文本要截取的字符索引
const leftTextIndex = calcTextLength(text, width);
const rightTextIndex = calcTextLength(reverseStr, width);
// 将右侧字符先截取，后翻转
reverseStr = reverseStr.substring(0, rightTextIndex);
reverseStr = reverseStr.split('').reverse().join('');
// 字符拼接
str = `${text.substring(0, leftTextIndex)}...${reverseStr}`;
} else {
str = text;
}
dom.innerHTML = str;
}
效果如下：
上面就是此功能的所有代码了，如果想要在本地试验的话，可以在本地新建一个 html 文件，复制上面代码就可以了。
CSS 代码实现
html 代码：
<ul >
<li >
<span >CSS 测试标题，空对着山中高士晶莹雪，终不忘世外仙姝寂寞林。叹人间，美中不足今方信；纵然是齐眉举案，到底意难平。</span>
<span title="CSS 测试标题，空对着山中高士晶莹雪，终不忘世外仙姝寂寞林。叹人间，美中不足今方信；纵然是齐眉举案，到底意难平。">CSS
测试标题，空对着山中高士晶莹雪，终不忘世外仙姝寂寞林。叹人间，美中不足今方信；纵然是齐眉举案，到底意难平。</span>
</li>
</ul>
CSS 代码：
.con {
font-size: 14px;
color: #666;
width: 600px;
margin: 50px auto;
border-radius: 8px;
padding: 15px;
overflow: hidden;
resize: horizontal;
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}
.wrap {
position: relative;
line-height: 2;
height: 2em;
padding: 0 10px;
overflow: hidden;
background: #fff;
margin: 5px 0;
}
.wrap:nth-child(odd) {
background: #f5f5f5;
}
.title {
display: block;
position: relative;
background: inherit;
text-align: justify;
height: 2em;
overflow: hidden;
top: -4em;
}
.txt {
display: block;
max-height: 4em;
}
.title::before{
content: attr(title);
width: 50%;
float: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
}
思路解析：
- 文字内容的父级标签 li 设置
line-height: 2;、overflow: hidden;、height: 2em;，因此 li 标签的高度是当前元素字体大小的 2 倍，行高也是当前字体大小的 2 倍，同时内容若溢出则隐藏。 - li 标签内部有两个 span 标签，二者的作用分别是：类名为
.txt的标签用来展示不需要省略号时的文本，类名为.title用来展示需要省略号时的文本，具体是如何实现的请看第五步。 - 给
.title设置伪类before，将伪类宽度设置为 50%，搭配浮动float: right;，使得伪类文本内容靠右，这样设置后，.title和伪类就会各占父级宽度的一半了。 .title标签设置text-align: justify;，用来将文本内容和伪类的内容两端对齐。- 给伪类
before设置文字对齐方式direction: rtl;，将伪类内的文本从右向左流动，即right to left，再设置溢出省略的 css 样式就可以了。 .title标签设置了top: -4em,.txt标签设置max-height: 4em;这样保证.title永远都在.txt上面，当内容足够长，.txt文本内容会换行，导致高度从默认 2em 变为 4em，而.title位置是-4em，此时正好将.txt覆盖掉，此时显示的就是.title标签的内容了。
知识点：text-align: justify;
- 文本的两端（左边和右边）都会与容器的边缘对齐。
- 为了实现这种对齐，浏览器会在单词之间添加额外的空间。这通常意味着某些单词之间的间距会比其他单词之间的间距稍大一些。
- 如果最后一行只有一个单词或少数几个单词，那么这些单词通常不会展开以填充整行，而是保持左对齐。
需要注意的是，
text-align: justify;主要用于多行文本。对于单行文本，这个值的效果与text-align: left;相同，因为单行文本无法两端对齐。
下面记录下查资料学到的相关知识：
- js 判断文字被溢出隐藏的几种方法;
- JS 获取字符串长度的几种常用方法，汉字算两个字节。
1、 js 判断文字被溢出隐藏的几种方法
1.1 Element-plus 这个 UI 框架中的表格组件实现的方案。
通过document.createRange和document.getBoundingClientRect()这两个方法实现的。也就是我上面代码中实现的checkLength方法。
1.2 创建一个隐藏的 div 模拟实际宽度
通过创建一个不会在页面显示出来的 dom 元素，然后把文本内容设置进去，真实的文本长度与标题盒子比较宽度，判断是否被溢出隐藏了。
function getDomDivWidth(dom) {
const elementWidth = dom.clientWidth;
const tempElement = document.createElement('div');
const style = window.getComputedStyle(dom, null)
const { left, right } = getPadding(dom); // 这里我写的有点重复了，可以优化
tempElement.style.cssText = `
position: absolute;
top: -9999px;
left: -9999px;
white-space: nowrap;
padding-left:${style.paddingLeft};
padding-right:${style.paddingRight};
font-size: ${style.fontSize};
font-family: ${style.fontFamily};
font-weight: ${style.fontWeight};
letter-spacing: ${style.letterSpacing};
`;
tempElement.textContent = dom.textContent;
document.body.appendChild(tempElement);
const obj = {
status: tempElement.clientWidth + right + left > elementWidth,
width: elementWidth - left - right
}
document.body.removeChild(tempElement);
return obj;
}
1.3 创建一个 block 元素来包裹 inline 元素
这种方法是在 UI 框架acro design vue中实现的。外层套一个块级(block)元素，内部是一个行内(inline)元素。给外层元素设置溢出隐藏的样式属性，不对内层元素做处理，这样内层元素的宽度是不变的。因此，通过获取内层元素的宽度和外层元素的宽度作比较，就可以判断出文本是否被溢出隐藏了。
// html 代码
<div id="test">
<span >空对着山中高士晶莹雪，终不忘世外仙姝寂寞林。叹人间，美中不足今方信；纵然是齐眉举案，到底意难平。</span>
</div>
// 创建一个 block 元素来包裹 inline 元素
const content = document.querySelector('.content');
function getBlockDomWidth(dom) {
const { left, right } = getPadding(dom);
console.log(dom.clientWidth, content.clientWidth)
const obj = {
status: dom.clientWidth < content.clientWidth + left + right,
width: dom.clientWidth - left - right
}
return obj;
}
1.4 使用 canvas 中的 measureText 方法和 TextMetrics 对象来获取元素的宽度
通过 Canvas 2D 渲染上下文(context)可以调用 measureText 方法，此方法会返回 TextMetrics 对象，该对象的width属性值就是字符占据的宽度，由此也能获取到文本的真实宽度，此方法有弊端，比如说兼容性，精确度等等。
// 获取文本长度
function getTextWidth(text, font = 14) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d")
context.font = font
const metrics = context.measureText(text);
return metrics.width
}
2、JS 获取字符串长度的几种常用方法
2.1 通过 charCodeAt 判断字符编码
通过 charCodeAt 获取指定位置字符的Unicode编码，返回的值对应 ASCII 码表对应的值，0-127 包含了常用的英文、数字、符号等，这些都是占一个字节长度的字符，而大于 127 的为占两个字节长度的字符。
function calcTextLength(text) {
let realLength = 0;
for (let i = 0; i < text.length; i++) {
charCode = text.charCodeAt(i);
if (charCode >= 0 && charCode <= 128) {
realLength += 1;
} else {
realLength += 2;
}
}
return realLength;
}
2.2 采取将双字节字符替换成”aa”的做法，取长度
function getTextWidth(text) {
return text.replace(/[^x00-xff]/g,"aa").length;
};
结语
以上就是 js 实现文本内容过长时，中间显示省略号，两端正常展示效果的全部方法，希望对大家有用，更多开发技巧请关注。