如何实现多行内文字自动省略号加 suffix

在酒店预订、电商列表等场景中，常面临关键数据与文本展示的博弈：既要完整显示价格/折扣等核心信息，又要在有限空间内尽可能展示长文本。当使用纯CSS的text-overflow方案时，会发现省略号会无情地覆盖最后几个字符——这意味着可能丢失价格数字的末位，这种体验对用户决策是致命伤害。

传统多行省略方案通过三行CSS即可实现：
“`css
.text-container {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
}
“`
但这种方法存在三大硬伤：
1. 无法控制省略号位置
2. 后缀内容会被截断
3. 无法动态适应字体变化

部分开发者尝试将...${suffix}通过绝对定位覆盖在文本容器右下角，但这种方案存在致命缺陷：
遮挡有效字符（特别是中文等复杂字形）
无法适应RTL语言环境
出现文本残影（如抗锯齿导致的半透明像素）

四步实现动态截断：
1. 获取容器的实际渲染宽度
2. 计算主文本+后缀的总占位宽度
3. 动态调整主文本截断位置
4. 保证后缀完整可见

“`javascript
function truncateWithSuffix(container, mainText, suffix) {
const canvas = document.createElement(‘canvas’);
const ctx = canvas.getContext(‘2d’);
ctx.font = window.getComputedStyle(container).font;

const suffixWidth = ctx.measureText(suffix).width;
const maxWidth = container.offsetWidth suffixWidth;

let result = ”;
for(let i = mainText.length; i >0; i–) {
const currentWidth = ctx.measureText(mainText.substr(0, i)).width;
if(currentWidth <= maxWidth) { result = mainText.substr(0, i) + '...' + suffix; break; } } return result || (suffix ? '...' + suffix : '...'); } ```

优化方向	具体策略	效果提升
字体测量	缓存measureText计算结果	减少70%计算量
渲染控制	使用ResizeObserver监听尺寸变化	避免无效重排
算法优化	二分查找替代顺序遍历	时间复杂度O(n)→O(log n)

“`jsx
const SmartTruncate = ({ text, suffix, lines=2 }) => {
const ref = useRef();
const [displayText, setDisplayText] = useState(”);

useLayoutEffect(() => {
const calculate = () => {
// 此处接入上述核心算法
};
const observer = new ResizeObserver(calculate);
observer.observe(ref.current);
return () => observer.disconnect();
}, [text, suffix]);

return (

);
};
“`

“`javascript
Vue.directive(‘truncate’, {
inserted(el, binding) {
const { text, suffix } = binding.value;
el.innerHTML = truncateWithSuffix(el, text, suffix);
},
componentUpdated(el, binding) {
// 更新逻辑
}
});
“`

特殊字符处理：
1. 阿拉伯语从右向左排版
2. 泰语等复杂字符集
3. 组合字符的宽度计算
“`javascript
// 增强measureText方法
function getSafeWidth(text) {
const span = document.createElement(‘span’);
span.textContent = text;
document.body.appendChild(span);
const width = span.offsetWidth;
document.body.removeChild(span);
return width;
}
“`