如何在JSX中为长文本按指定字符数添加换行？

可以写一个工具函数，在指定长度附近的空格位置插入换行（避免截断单词），直接返回可渲染的JSX元素，替代原有的字符串处理：

1. 实现智能换行函数 #

import React from 'react';

// 按指定最大长度，在空格处智能拆分文本并添加换行
function addSmartLineBreaks(str, maxLength) {
  // 长度不足直接返回原字符串
  if (str.length <= maxLength) return str;

  // 找到最大长度范围内最后一个空格的位置
  let breakPos = str.lastIndexOf(' ', maxLength);
  // 如果找不到空格（比如全是连续无空格字符），就按固定长度截断
  if (breakPos === -1) breakPos = maxLength;

  const firstSegment = str.slice(0, breakPos);
  const restSegment = str.slice(breakPos + 1); // 跳过空格

  // 递归处理剩余文本
  return (
    <>
      {firstSegment}
      <br />
      {addSmartLineBreaks(restSegment, maxLength)}
    </>
  );
}

2. 整合到你的代码中 #

修改dailyPlaylist的name字段，调用上面的函数（这里设定最大长度为20，你可以根据需求调整）：

const dailyPlaylist = {
    tracks: response.data.tracks.items.map(({ track }) => ({
        key: track.id,
        name: addSmartLineBreaks(track.album.name, 20), // 替换原字符串为带换行的JSX
        artists: track.artists.slice(0, 5).map((artist, idx) => <p key={idx}>{artist.name}</p>), // 给p标签加key避免警告
        image: track.album.images[1].url
    }))
}

3. 渲染时直接使用 #

在组件中渲染曲目名称时，直接用{track.name}即可，不需要额外处理：

{dailyPlaylist.tracks.map(track => (
  <div key={track.key}>
    <img src={track.image} alt={track.name} />
    <div>{track.name}</div>
    <div>{track.artists}</div>
  </div>
))}

如果不需要考虑单词完整性，只想强制按固定字符数拆分，可以用下面的简化函数：

function addFixedLineBreaks(str, maxLength) {
  const segments = [];
  for (let i = 0; i < str.length; i += maxLength) {
    segments.push(str.slice(i, i + maxLength));
  }
  return segments.map((seg, idx) => (
    <>
      {seg}
      {idx < segments.length - 1 && <br />}
    </>
  ));
}

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