多行文本自动省略号加Suffix的完整实现指南

当展示空间遭遇关键数据

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

基础方案与核心痛点

纯CSS的局限性

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

绝对定位的伪解决方案

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

JavaScript动态计算方案

核心实现逻辑

四步实现动态截断：
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 : '...'); } ```

性能优化要点

框架集成方案

React组件封装示例

“`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 (