Как обеспечить согласованную визуализацию разделенного и неразделенного текста? ⇐ CSS

[Anonymous]

Я работаю над проектом React, в котором мне нужно анимировать отдельные буквы в строке, поэтому я разбиваю строку на отдельные элементы span для каждой буквы. Однако я столкнулся с проблемой, когда текст при разделении выглядит иначе, чем при обычном отображении в виде непрерывной строки.
Примечание. Текст разделить до уровня символов, при этом каждый символ заключен в интервал.
Вот упрощенная версия моего кода:

Код: Выделить всё

import { ReactNode } from "react";

export function splitWord(input: string): string[] {
return input.match(/\S+|\s+/g) || [];
}

export function splitLetter(input: string): string[] {
const characters: string[] = [];
const regex = /[\s\S]/gu;
let match;
while ((match = regex.exec(input)) !== null) {
characters.push(match[0]);
}
return characters;
}

export function splitStringWithSpan(input: string): ReactNode {
return (

{splitWord(input).map((wordOrSpace, wordIndex) => (

{splitLetter(wordOrSpace).map((letter, letterIndex) => (

{letter === " " ? "\u00A0" : letter}

))}

))}

);
}

const Help = () => {
return (


Splitted
{splitStringWithSpan("Young")}


Not SplittedYoung


);
};

export default Help;

В коде я отображаю текст «Молодой» двумя способами:

• Разбиваю на отдельные буквы с помощью SplitStringWithSpan .
• Отображается как обычная строка.

Проблема:
пример
Разделенный текст выглядит немного шире, чем неразбитый текст. Вы можете видеть, что в примере символ "Y" немного отличается по ширине.
Вопрос:
Как сделать так, чтобы разделенный текст выглядел такой же, как у неразделенного текста с точки зрения ширины и интервала символов?
Попытки:
Я попробовал изменить максимальную ширину каждого отдельного символа на

Код: Выделить всё

max-width: 0.94em;

Это работает для некоторых символов, например «W», но все равно не может обрабатывать все пробелы между символами.

Подробнее здесь: https://stackoverflow.com/questions/790 ... split-text