65

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

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

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

我初始化弹出框如下

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

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

4

6 回答 6

112

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

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

于 2013-01-22T13:30:40.590 回答
41

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

.popover {
    white-space: pre-wrap;    
}
于 2014-11-21T09:57:59.790 回答
36

要添加到 Arun P Johny 的解决方案，如果您发现值中的<br />标签在data-content页面上的弹出框内容中呈现为纯文本，请添加附加属性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 攻击的潜在漏洞；不要将它与未经处理的用户输入一起使用。

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

于 2015-01-06T14:52:42.223 回答
10

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

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

谢谢大家的帮助！

于 2015-07-22T07:41:26.753 回答
2

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

.popover-content {
    white-space: pre-wrap;
}
于 2016-02-02T22:29:29.010 回答
1

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

于 2016-11-24T10:08:44.597 回答