Я прочитал эту текстовую строку json, и она отказывается отображать с разрывом строки

Question

У меня есть кусок текста в json, который выглядит так: «Я хочу новую строку \ nздесь».

У меня есть этот код, который показывает текст, но сначала замените \n на a <br />:

<p className="subtitle is-5 has-text-white has-text-weight-light summary-text">
  {Resume.basics.summary.replace(/(?:\r\n|\r|\n)/g, '<br />&nbsp')}
</p>

И Resume.basi c .summery это json:

"basics": {
    "name": "Greta Thunberg",
    "label": "Environmental Activist",
    "picture": "images/GretaThunberg 2.jpg",
    "x_pictureFallback": "images/GretaThunberg portrait.jpg",
    "x_title": "Hey There! Glad you're here",
    "summary": "I want a new line\nhere",
    "location": {
      "country": "Sweden",
      "countryCode": "SE",
      "region": "Stockholm"
    },
    "profiles": [
      {......................"

Проблема в том, что новая строка никогда не отображается, но он работает, если мне это нравится:

 <p className="subtitle is-5 has-text-white has-text-weight-light summary-text">
   <p>I want a new line<br />here</p>
 </p>

Тогда вывод будет:

Я хочу новую строку здесь

Это приложение React! Есть идеи, почему?

Answer 1

Для справки, после прочтения предлагаемых решений здесь в комментариях и ответе (спасибо всем) Я нашел это Новая строка в строке реакции Решено , особенно ответ yuzu-r.

Я вижу, вы отметили это решенным, но на случай, если кто-то посетит это позже:

Если вы добавляете несколько строк текста с \ n в div, добавьте следующее к css для рассматриваемого div:

div {white-space: pre-wrap; }

Но в моем случае это был <p>, но он тоже работает. Затем я сохранил текст json как «Я хочу новую строку \ nздесь». и код вернулся к исходному:

<p className="subtitle is-5 has-text-white has-text-weight-light summary-text">
  {Resume.basics.summary}
</p>

И работает текст "с новой строкой", как и ожидалось