Перенос текста на следующую строку после полной остановки или условия?

Question

Можно ли переместить текст на следующую строку после полной остановки?

Например, со стандартным заголовком h1 - «Это очень. Очень. Большой заголовок.

Но я хочу, чтобы мои заголовки переместились на следующую строку после полной остановки -

'Это очень.

Очень.

Большой заголовок. '

Моя цель состоит в том, чтобы каждый заголовок h1 выбирался из API для for для форматирования, поэтому строка переносится каждый раз, когда происходит полный останов'. '

Код:

<div className='quote-wrapper'>
    <h1 className='quote'>{currentQuote.quote}</h1>
</div>

Answer 1

Вы можете сделать это с помощью метода split. Вот как я это сделал. https://code.sololearn.com/W85wKQly9I7a/?ref=app

Answer 2

Я не верю, что есть способ, которым это может быть достигнуто как CSS стиль или HTML свойство. Посмотрите на word-wrap и text-overflow, если они работают на вас.

В JavaScript это легко. Просто найдите все элементы, которые вы хотите изменить (как и все h1, получите их текущий текст с .innerText или .innerHtml, а затем установите их текущий текст, чтобы быть их старым текстом, но замените все периоды на новые строки.

document.querySelectorAll("h1").forEach((x) => {
  x.innerText = x.innerText.replace(/\./g, "\n")
})

Здесь document.querySelectorAll("h1") возвращает список всех h1 на странице. Вы можете сделать что-то вроде ".quote" для выбора по классу и т. Д. c.

forEach(...) берет функцию (вещь (x) => {...}) и применяет ее к каждому элементу в списке.

В нашей функции x.innerText - это текст внутри элемента h1 и replace заменяет все, что соответствует первому аргументу (/\./g), вторым аргументом ("\n"). Здесь /\./g - это регулярное выражение для "всех периодов", а "\n" - символ новой строки.

---

Edit:

Похоже, вы используете React, так что вам на самом деле ничего не нужно делать с querySelector. Просто выполните замену на currentQuote.quote прямо перед тем, как поместить ее в DOM