如何在React.js中实现文本截取：超过50字符显示省略号？

方案一：JS精确控制字符数 #

这种方法能严格按照你要求的50字符阈值处理，不受容器宽度影响：

const Post: React.FC<{ text: string }> = ({ text }) => {
  const truncatedText = text.length > 50 ? `${text.slice(0, 50)}...` : text;
  return <p>{truncatedText}</p>;
};

说明：

• 给组件props添加了类型定义，确保text为字符串类型，提升代码健壮性
• 通过三元运算符判断文本长度：超过50字符时截取前50位并拼接省略号，否则直接渲染原文本
• 若需要严格控制显示的字符总数（含省略号），可调整为text.slice(0, 47) + '...'，确保总长度为50

方案二：CSS按容器宽度截断（响应式场景适用） #

如果你的需求更偏向于根据容器宽度自动截断，而非固定字符数，可以用CSS实现：

const Post: React.FC<{ text: string }> = ({ text }) => {
  return (
    <p style={{
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      maxWidth: '100%' // 可根据需求设置具体宽度值，比如'500px'
    }}>
      {text}
    </p>
  );
};

说明：

• 借助CSS的text-overflow: ellipsis属性实现自动截断，需配合whiteSpace: nowrap和overflow: hidden生效
• 这种方式基于容器宽度计算截断位置，适合响应式布局场景，但无法精确控制字符数

内容的提问来源于stack exchange，提问作者Malibox