React中拆分字符为span后，如何保证与原文本渲染一致？

问题根源 #

将文本拆分为单个字符包裹<span>后，浏览器无法对离散字符应用字距调整（Kerning）——也就是连续文本中某些字母组合（比如"Yo"）之间的自动微调间距，同时多余的嵌套span和非继承的字体属性也会导致布局差异，最终让拆分后的文本看起来更宽。

解决方案 #

核心思路是让每个字符span完全继承原文本的排版属性，并确保浏览器能正常应用字距调整，同时减少不必要的布局层级：

• 简化字符拆分逻辑，用Array.from()替代正则，更简洁且支持Unicode字符
• 统一字体属性，让每个字符span继承父元素的所有字体样式，避免额外间距
• 启用字距调整，显式设置font-kerning: normal，保证和原文本的字距一致
• 减少嵌套层级，去掉多余的span嵌套，避免破坏文本流

修改后的代码 #

import { ReactNode } from "react";

// 简化字符拆分，支持Unicode字符
export function splitLetter(input: string): string[] {
  return Array.from(input);
}

export function splitStringWithSpan(input: string): ReactNode {
  return (
    <span className="inline">
      {splitLetter(input).map((letter, index) => (
        <span
          key={index}
          className="inline font-inherit text-inherit font-kerning-normal letter-spacing-normal"
        >
          {letter === " " ? "\u00A0" : letter}
        </span>
      ))}
    </span>
  );
}

const Help = () => {
  return (
    <div className="text-5xl font-semibold flex flex-col">
      <div>
        <div className="text-xs">Splitted</div>
        {splitStringWithSpan("Young")}
      </div>
      <div>
        <div className="text-xs">Not Splitted</div>Young
      </div>
    </div>
  );
};

export default Help;

额外优化（针对Tailwind） #

如果使用Tailwind CSS，可以在tailwind.config.js中添加自定义工具类，方便复用：

module.exports = {
  theme: {
    extend: {
      fontKerning: {
        normal: 'normal',
      },
    },
  },
};

关键CSS属性解释 #

• font-kerning: normal：启用字体自带的字距调整数据，让字符间的间距和连续文本一致
• font-inherit/text-inherit：强制span继承父元素的字体大小、粗细、行高所有属性
• inline：保持span为内联元素，不破坏文本流的连续排版

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