引导弹出框隐藏换行符

Question

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

<a data-original-title="" data-content="Hi,
           Welcome !
           Sincerely,
             programmer
           "
   data-placement="bottom">
    content
</a>

我初始化了弹出窗口，如下所示

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

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

Answer 1

您需要

在 html 中使用 <br/> 换行或使用 <pre> 标记

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

Answer 2

可以使用

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

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

Answer 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 攻击的潜在漏洞;不要将其与未经净化的用户输入一起使用。

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

Answer 4

我设法通过将 添加到我希望线条断开的弹出框文本中并将以下内容添加到我的样式表中来使其工作：

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

谢谢大家的帮助！

Answer 5

我们设法使用了空白的样式：预包装，除了我们发现在整个弹出窗口中添加了额外的空格。 相反，我们将此样式添加到弹出框内容中。

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

Answer 6

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