如何在 内的 Bulma css 内容类中启用换行符答案

【问题标题】：How to enable line break in Bulma css content class within 如何在 内的 Bulma css 内容类中启用换行符
【发布时间】：2020-03-26 08:04:20
【问题描述】：

我正在使用 Bulma css 创建网站并有一个 textarea 输入字段。在保存到 mongoDB 之前，我使用以下命令将换行符 \n 转换为
:

subject = subject.replace('\n', ' ')

在将主题显示到屏幕之前，我使用以下代码将其转换回来： str.replace(' ', '\n'); 并将内容放入一个Media content class div中。

<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

有人有什么建议吗？

【问题讨论】：

标签： css bulma

【解决方案1】：

我发现以下代码可用于 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;
}
```

【讨论】：

【解决方案2】：

谷歌搜索并尝试了一段时间后，使用以下 css 代码，我可以启用换行符：

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

【讨论】：