我要评论前言
项目中经常会遇到缩略展示文字的场景，即要求文字在一行不换行展示，超出自动展示...
常用的展示效果有两种，文字中间缩略以及文字末尾缩略，效果如下所示
// 中间缩略 这是一段超长...超长文字如何展示 // 末尾缩略 这是一段超长的文字，看看超长....
对于描述之类的文本，一般选择末尾缩略，这种场景仅靠css即可快速实现。但是对于文件名之类的场景，会期望中间缩略，保留末尾的文件后缀。下面分别介绍下两种方案的实现。
末尾缩略
使用css需实现3个效果：
- 内容超出不展示
- 文字不会自动折行
- 设置对应超出样式
如果在实现过程中发现样式不生效，一定是上述3个条件有不满足的。
对应css代码如下：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
中间缩略
中间缩略的样式，只能手动切分字符串，并在中间拼接...， 因此关键在与，如何获得要切分的起止位置。
思路整理
本例使用
react实现。之所以只用js实现，一个是因为简单，第二个则是使用css的大部分方式，需要重叠两个div，用户在选中的时候，体验不太好。
- 因为要做到通用性所以，
container的宽度是不能确定的，它的宽度需要根据它外层的父元素来决定。因此定义两层嵌套元素，外层宽度跟随父元素，并设置overflow: hidden;white-space: nowrap;。内层宽度不做限定，保证可以正常占位。
<div classname="auto-ellipsis-text">
<span classname="auto-ellipsis-text-inner">{str}</span>
</div>
.auto-ellipsis-text{
width: 100%;
overflow: hidden;
white-space: nowrap;
}
- 然后实现下宽度计算逻辑，并更新渲染节点
在div.auto-ellipsis-text上增加ref，获取对应的dom句柄
const handle = usecallback(() => {
// 获取渲染节点的句柄
const cu = textref.current;
if (!cu) {
return;
}
// 获取此时父元素宽度
const width = cu.clientwidth;
// 获取文本节点宽度
const textchild = cu.firstelementchild as htmlelement;
const innerwidth = textchild.offsetwidth;
// 没有超出则不处理
if (width >= innerwidth) {
return;
}
// 计算切分位置
const splitwidth = width / 2;
const range = document.createrange();
const length = textchild.innertext.length;
const arr = [];
let countwidth = 0;
let startindex = 0;
let endindex = 0;
// 步进为2，逐个获取对应的宽度，并在首次累计宽度大于 splitwidth 时记录起始位置，
// 在首次剩余宽度小于 splitwidth 时，记录截止位置，停止for循环
for (let i = 0; i < length - 2; i += 2) {
range.setstart(textchild.childnodes[0], i);
range.setend(textchild.childnodes[0], i + 2);
const rs = range.getboundingclientrect();
arr.push({ index: i, width: rs.width });
countwidth += rs.width;
if (countwidth > splitwidth && !startindex) {
startindex = i;
}
if (innerwidth - countwidth < splitwidth) {
endindex = i + 2;
break;
}
}
// 切分字符串并补充缩略符
const newstr = text.slice(0, startindex) + '...' + str.slice(endindex);
// 更新渲染节点
setstr(newstr);
}, []);
最终实现
- 如果每个实例都监听父元素宽度的变化，性能太差，因此补充入参
version，由调用方自行监听宽度并变更version来触发更新 - 在
useeffect中监听version和text的变化，先重置str，保证渲染是最新的，然后在下个事件循环中，使用上文中的方式，计算切分位置并更新文本渲染 - 不直接依赖
str是为了防止计算出问题导致的无限死循环，上条中useeffect只会在text变化或者version变化后才会执行
export default function autoellipsistext({
text,
classname,
version,
}: {
text: string;
classname?: string;
version?: number;
}) {
const [str, setstr] = usestate(text);
const textref = useref<htmldivelement>(null);
const handle = usecallback(() => {
/* 功能函数...*/
}, []);
useeffect(() => {
setstr(text);
promise.resolve().then(() => {
handle();
});
}, [text, version]);
return (
<div classname={`auto-ellipsis-text ${classname || ''}`} ref={textref}>
<span classname="auto-ellipsis-text-inner">{str}</span>
</div>
);
}
使用
- 上述示例对应代码仓库为auto-ellipsis-text，
demo放置在这里，也可以clone仓库后直接本地运行。
调用示例
<autoellipsistext text="这是一个超长的文件名超长的文件名超长的文件名文件末尾在这里.txt" version={width} />
- 对应npm包也已经发布，有需要可以去下载
待优化项
- 很多时候可能需要使用
<em>等标签来对文本做特殊展示，需要补充对于标签元素的计算 - 多行的文本省略，不管是居中省略还是末尾省略，可能会以补充组件的形式，实现一个最小化的组件
写在最后
以上就是javascript实现文本中间缩略的两种方案的详细内容，更多关于javascript文本中间缩略的资料请关注代码网其它相关文章！
发表评论