Bootstrap popover隐藏换行符

Question

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

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

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

我按如下方式初始化了popover

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

一切正常,但问题是数据内容中可用的内容没有显示空格....它删除所有新行并在单行显示....我怎样才能克服这个....

Answer 1

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

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

Answer 2

要添加到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

Answer 3

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

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

Answer 4

我设法通过在我的popover文本中添加\n来实现这一点,我希望这些行能够中断并将以下内容添加到我的样式表中:

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

感谢大家的帮助!