ReactJS实现文本超2行中间加省略号，≤2行显示完整文本

需要实现的文本截断规则：

• 当文本行数≤2时，完整显示原文本，不添加省略号
• 当文本行数＞2时，在文本中间插入省略号进行截断

现有代码可实现中间添加省略号，但存在行数≤2时仍显示省略号的问题，需对代码进行修正。

现有代码 #

const Main=()=>{
return(
 <div>
   <p>{truncateMiddle(textDummy)}</p>
 </div>
)

const truncateMiddle=(text)=>{
  const offset = 50;
  const ellipsis = '...'
  const len = text.length;
  const tail = text.slice(len - offset, len);
  let head = ""

  let end = len - offset;
  let start = 50;

  while (start < end - 1) {
    const curr = Math.floor((end - start) / 2 + start);
    head = text.slice(0, curr);
    end = curr;
  }
  head = text.slice(0, start || 1);
  return head + ellipsis + tail;
}

示例 #

1. 超2行文本 #

原文本：

"aaaaaaa bbbbbbb ccccccc
ddddd ffffff gggggg
hhhhh iiiiii jjjjjj"

处理后效果：

"aaaaaaa bbbbbbb ccccccc
hh...... iiiiii jjjjjj"

2. ≤2行文本 #

原文本：

"aaaaaaa bbbbbbb ccccccc
 ddddd ffffff gggggggggg"

处理后保持原内容：

"aaaaaaa bbbbbbb ccccccc
 ddddd ffffff gggggggggg"

修正后的代码 #

const Main=()=>{
return(
 <div>
   <p>{truncateMiddle(textDummy)}</p>
 </div>
)

const truncateMiddle=(text)=>{
  // 统计文本行数
  const lineCount = text.split('\n').length;
  // 行数≤2时直接返回原文本
  if (lineCount <= 2) {
    return text;
  }

  const offset = 50;
  const ellipsis = '...'
  const len = text.length;
  const tail = text.slice(len - offset, len);
  let head = ""

  let end = len - offset;
  let start = 50;

  while (start < end - 1) {
    const curr = Math.floor((end - start) / 2 + start);
    head = text.slice(0, curr);
    end = curr;
  }
  head = text.slice(0, start || 1);
  return head + ellipsis + tail;
}

修正说明 #

• 新增行数判断逻辑：通过text.split('\n').length统计文本行数
• 若行数≤2，直接返回原文本，跳过截断逻辑
• 仅当行数＞2时，执行原有的中间截断逻辑

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