Как включить разрыв строки в классе контента Bulma css в пределах <p></p>

Question

Я использую Bulma css, чтобы создать сайт и ввести поле ввода textarea. Перед сохранением в mongoDB я использую следующую команду для преобразования разрыва строки \ n в
:

subject = subject.replace('\n', '<br>')

Перед отображением объекта на экране я использую следующую код для преобразования его обратно: str.replace('<br>', '\n'); И поместите содержимое в div класса Media media.

<section className="modal-card-body has-text-black">
  <article className="media has-background-grey-lighter">
    <div className="media-content">
      <div className="content">
        <p>
          {subject}
        </p>
      </div>
    </div>
  </article>
</section>

Однако, разрыв строки не эффективен, все текстовые ссылки вместе.

Например, если я введу следующий текст в текстовое поле:

I need to see a doctor.
Please get back to me ASP

После сохранения и преобразования обратно он объединит две строки в одну строку:

I need to see a doctor. Please get back to me ASP

Любой может предложить

Answer 1

После поиска и поиска в течение некоторого времени, используя следующий код css, я могу включить разрыв строки:

.enable-line-break {
    white-space: pre-wrap;
}

Answer 2

Я обнаружил, что следующий код доступен для разрыва строки в Bulma CSS:

.chat-bubble
{
    white-space: pre !important;
    max-width: 10% !important;
    padding: 2px 9px 2px 9px !important;
    height: auto !important;
    text-align: left !important;
}
```