react如何省略号
实现文本省略号效果
在React中实现文本省略号效果可以通过CSS样式或JavaScript逻辑处理。以下是几种常见方法：
使用CSS text-overflow属性
通过CSS的text-overflow: ellipsis属性可以轻松实现单行文本的省略号效果：
<div style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
width: '200px'
}}>
这是一段很长的文本内容，当超出容器宽度时会显示省略号
</div>多行文本省略
使用CSS的-webkit-line-clamp属性可以实现多行文本省略：
<div style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 3,
overflow: 'hidden',
width: '300px'
}}>
这是多行文本内容，超过指定行数后会显示省略号...
</div>使用React组件实现
可以创建一个可复用的Ellipsis组件：
function EllipsisText({ text, maxLength }) {
return (
<span>
{text.length > maxLength ? `${text.substring(0, maxLength)}...` : text}
</span>
);
}
// 使用示例
<EllipsisText text="这是一段很长的文本" maxLength={5} />动态计算文本宽度
对于更复杂的需求，可以结合DOM测量实现精确控制：
function SmartEllipsis({ text, containerWidth }) {
const [displayText, setDisplayText] = useState(text);
const textRef = useRef(null);
useEffect(() => {
if (textRef.current.scrollWidth > containerWidth) {
let truncated = text;
while (textRef.current.scrollWidth > containerWidth && truncated.length > 0) {
truncated = truncated.slice(0, -1);
textRef.current.textContent = truncated + '...';
}
setDisplayText(truncated + '...');
}
}, [text, containerWidth]);
return <span ref={textRef}>{displayText}</span>;
}响应式省略处理
结合ResizeObserver实现响应式省略：
function ResponsiveEllipsis({ children }) {
const [isTruncated, setIsTruncated] = useState(false);
const containerRef = useRef(null);
useEffect(() => {
const observer = new ResizeObserver((entries) => {
const entry = entries[0];
if (entry.target.scrollWidth > entry.contentRect.width) {
setIsTruncated(true);
} else {
setIsTruncated(false);
}
});
observer.observe(containerRef.current);
return () => observer.disconnect();
}, []);
return (
<div
ref={containerRef}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: isTruncated ? 'ellipsis' : 'clip'
}}
>
{children}
</div>
);
}这些方法可以根据具体需求选择使用，CSS方案性能更好，而JavaScript方案则提供更多控制灵活性。
