React中如何实现文本字数限制？附相关代码示例

针对你遇到的文本截断需求，这里提供两种实用实现方案：

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

适合需要固定截断字数的场景，通过工具函数处理字符串：

1. 编写截断工具函数 #

// 工具函数：截断文本并添加省略号
const truncateText = (text, maxLength) => {
  if (!text) return ''; // 处理空值避免报错
  return text.length > maxLength 
    ? `${text.slice(0, maxLength)}...` 
    : text;
};

2. 在组件中调用 #

替换你原有代码，传入需要截断的文本和最大字符数：

<ProductImg imgtext={truncateText(products.description, 20)} />
<p>{truncateText(product.name, 15)}</p>

注：maxLength 值可根据需求调整，比如示例中的产品名称设置为15时，就能得到 HD Single Sided... 的效果

方案二：CSS 按容器宽度截断 #

适合响应式场景，根据容器宽度自动截断文本，无需计算字符数：

1. 添加 CSS 样式 #

.truncated-text {
  white-space: nowrap; /* 强制文本单行显示 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  max-width: 200px; /* 按需设置容器最大宽度 */
}

2. 在组件中应用类名 #

<p className="truncated-text">{product.name}</p>

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