CSS с реагированием текстового транспорта-Как правильно выровнять текст для всех браузеров ⇐ Javascript

[Anonymous]

На моей целевой странице у меня есть статический текст, за которым следует слово, которое я хочу менять каждые пару секунд с переходом. Я решил использовать для этого React-Text-Transition. Моя проблема в том, что я не могу выравнивать их, чтобы смотреть должным образом и последовательно в браузерах. < /P>
В настоящее время это код: < /p>

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

Blah blah blah in your

{}


< /code>
и компонент IntervalChangingText: < /p>
import { useEffect, useState } from "react"
import TextTransition, { presets } from 'react-text-transition';

export default function IntervalChangingText(props) {
const {textList, interval} = props
const [textListIndex, setTextListIndex] = useState(0)

useEffect(() => {
const intervalId = setInterval(() => {
setTextListIndex(textListIndex + 1)
}, interval);

return () => clearInterval(intervalId);
}, [textListIndex]);

return (
{textList[textListIndex % textList.length]}
)
}
< /code>
На Chrome все выглядит хорошо, как это: < /p>
-----------------------------
|Blah blah blah              |
|in your [text that changes] |
-----------------------------
< /code>
Однако на сафари они не: < /p>
-----------------------------
|Blah blah blah              |
|in your                     |
|[text that changes]         |
-----------------------------
< /code>
И в Firefox это еще хуже, текст все в одной строке и оставляет свою коробку: < /p>
-----------------------------
|Blah blah blah in your [text| that changes]
-----------------------------

Я подозреваю, что проблема с дисплеем : "ruby" Но я не знаю, как сделать эту работу в соответствии с CSS во всех браузерах. Есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/794 ... l-browsers