React 中限制字符串显示的字数：截断过长文本并添加省略号

聖光之護 2025-11-16 00:00:00 次阅读

本教程介绍如何在 React 应用中限制字符串显示的字数，特别是针对产品描述等长文本，通过 JavaScript 函数截取指定数量的单词，并在末尾添加省略号，从而保证页面布局的美观和信息的可读性。

在 React 开发中，经常会遇到需要展示文本信息的情况，例如产品名称、文章标题等。但有时文本过长，直接显示可能会影响页面布局或用户体验。这时，我们需要对文本进行截断，只显示部分内容，并在末尾添加省略号（...）以表明文本已被截断。

以下提供一种实现方法，用于限制字符串显示的字数：

实现方法

我们可以创建一个 JavaScript 函数，该函数接收一个字符串作为参数，将其分割成单词数组，然后截取指定数量的单词，并将它们重新组合成一个字符串，最后添加省略号。

const cutTitleFunction = (text, wordLimit = 3) => {
  if (!text) return ''; // 避免处理空字符串
  const words = text.split(' ');
  if (words.length <= wordLimit) {
    return text; // 如果单词数量小于等于限制，则直接返回原文本
  }
  return words.slice(0, wordLimit).join(' ') + '...';
};

代码解释

cutTitleFunction(text, wordLimit = 3): 定义一个名为 cutTitleFunction 的函数，它接受两个参数：
- text: 要处理的字符串。
- wordLimit: 可选参数，指定要保留的单词数量，默认为 3。
if (!text) return '';: 添加对空字符串的处理，避免出现错误。如果传入的 text 为空，则直接返回空字符串。
const words = text.split(' ');: 使用空格将字符串分割成单词数组。
if (words.length : 如果单词数量小于等于限制值，则直接返回原文本，避免不必要的截断。
words.slice(0, wordLimit).join(' ') + '...': 使用 slice() 方法截取数组的前 wordLimit 个元素，然后使用 join(' ') 方法将这些单词重新组合成一个字符串，并在末尾添加省略号。

在 React 组件中使用

现在，我们可以在 React 组件中使用这个函数来截断文本。

import React from 'react';

const ProductImg = ({ imgtext }) => {
  const limitedText = cutTitleFunction(imgtext);

  return (
    {limitedText}
  );
};

export default ProductImg;