Bootstrap 弹出框隐藏换行符答案

【问题标题】：Bootstrap popover hides line breaksBootstrap 弹出框隐藏换行符
【发布时间】：2013-01-05 18:00:32
【问题描述】：

我正在使用下面的html代码来显示引导弹出窗口

<a data-original-title="" data-content="Hi,
           Welcome !

           Sincerely,
             programmer
           "
   data-placement="bottom">
    content
</a>

然后我按如下方式初始化了弹出框

$(this).popover({
            html:true
        });

一切正常，但问题是数据内容中可用的内容没有与空格一起显示......它会删除所有新行并将其显示在单行中......我该如何克服这个...... ..

【问题讨论】：

正如 Arun 提到的，您需要在 data-content 属性中使用 HTML。如果需要在属性中使用属性，只需使用单引号即可。

标签： html twitter-bootstrap popover

【解决方案1】：

您需要在 html 中使用<br /> 换行或使用<pre> 标签

确保存在data-html="true" 属性。

【讨论】：

使用 Bootstrap 5，必需的属性是 data-bs-html="true"。

【解决方案2】：

您可以使用white-space: pre-wrap; 保留格式中的换行符。无需手动插入html元素。

.popover {
    white-space: pre-wrap;    
}

【讨论】：

这太棒了，需要更多的支持。我不知道pre-wrap 选项。
这也会在文本中保留多个相邻的空格。 white-space: pre-line 只保留换行符。
优秀...这对我有用

【解决方案3】：

要添加到 Arun P Johny 的解决方案，如果您发现 data-content 值中的 <br /> 标记在页面上的弹出框内容中呈现为纯文本，请添加附加属性 data-html="true"，如下所示：

<a data-content="Hi,<br />Welcome !<br /><br />Sincerely,<br />programmer"
        data-html="true"
        data-placement="bottom">
    content
</a>

请注意，使用data-html="true" 确实会给XSS attacks 带来潜在的漏洞；不要将它用于未经处理的用户输入。

文档：https://getbootstrap.com/docs/3.3/javascript/#popovers-options

【讨论】：

【解决方案4】：

我设法通过在我希望换行的弹出框文本中添加 \n 并将以下内容添加到我的样式表中来实现此功能：

.popover {
    white-space: pre-line;    
}

谢谢大家的帮助！

【讨论】：

【解决方案5】：

我们设法使用了 white-space: pre-wrap 的样式，但我们发现它为整个弹出框添加了额外的空白。相反，我们将此样式添加到 popover-content 中。

.popover-content {
    white-space: pre-wrap;
}

【讨论】：

【解决方案6】：

您只需将 data-html="true" 添加到您的标签中，然后帮助文本中的所有 html 标签都可以正常工作，

【讨论】：