Question

我使用html代码如下显示bootstrap popover

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

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

我按照以下方式初始化了popover

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

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

Answer 1

您需要将 用于html中的新行或使用<pre>代码

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

Answer 2

要添加到Arun P Johny的解决方案，如果您发现 值中的data-content标记在页面上的弹出框内容中呈现为纯文本，请添加其他属性{{ 1}}，像这样：

data-html="true"

请注意，使用<a data-content="Hi, Welcome ! Sincerely, programmer" data-html="true" data-placement="bottom"> content </a>确实会为XSS attacks带来潜在漏洞;不要在未经过用户输入的情况下使用它。

文档：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;    
}

感谢大家的帮助！

Answer 5

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

unq,idx,counts = np.unique(dist,return_counts=True,return_inverse=True)
mean_out = np.bincount(idx,value)/counts

Answer 6

你只需要添加data-html =＆＃34; true＆＃34;对于您的标记，然后帮助文本中的所有html标记都可以正常工作，

Bootstrap popover隐藏换行符

6 个答案: