Html Bootstrap 弹出窗口隐藏换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14459691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap popover hides line breaks
提问by Aravindhan
I am using the html code as follows to show the bootstrap popover
我正在使用如下的 html 代码来显示引导程序弹出窗口
<a data-original-title="" data-content="Hi,
Welcome !
Sincerely,
programmer
"
data-placement="bottom">
content
</a>
And I initialized the popover as follows
我按如下方式初始化了弹出窗口
$(this).popover({
html:true
});
All works fine but the problem is the content available in data-content not displayed with the spaces....It removes all the new lines and show it in the single line ....How can i overcome this....
一切正常，但问题是数据内容中可用的内容没有与空格一起显示......它删除了所有新行并将其显示在单行中......我如何克服这个......
回答by Arun P Johny
You need to use <br />for new line in html or use a <pre>tag
您需要<br />在 html 中使用换行符或使用<pre>标签
Ensure the data-html="true"attribute is present.
确保该data-html="true"属性存在。
回答by Jon Schneider
To add on to Arun P Johny's solution, if you find that your <br />tags in the data-contentvalue are rendering as plain text in the popover content on the page, add the additional attribute data-html="true", like so:
要添加 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>
Be aware that using data-html="true"does introduce a potential vulnerability to XSS attacks; don't use it with unsanitized user input.
请注意，使用data-html="true"确实会引入XSS 攻击的潜在漏洞；不要将它与未经消毒的用户输入一起使用。
Docs: https://getbootstrap.com/docs/3.3/javascript/#popovers-options
文档：https: //getbootstrap.com/docs/3.3/javascript/#popovers-options
回答by AncientSyntax
You can use white-space: pre-wrap;to preserve line breaks in formatting. There is no need to manually insert html elements.
您可以使用white-space: pre-wrap;保留格式中的换行符。无需手动插入 html 元素。
.popover {
white-space: pre-wrap;
}
回答by Johann Marx
I managed to get this working by adding \n to my popover text where I want the lines to break and adding the following to my stylesheet:
我设法通过将 \n 添加到我希望行中断的弹出文本中并将以下内容添加到我的样式表中来实现此目的：
.popover {
white-space: pre-line;
}
Thanks for the help, everyone!
谢谢大家的帮助！
回答by cmejet
We managed to use the styling of white-space: pre-wrap except we found that added extra whitespace to the whole pop-over. Instead we added this styling to the popover-content.
我们设法使用了 white-space: pre-wrap 的样式，但我们发现在整个弹出窗口中添加了额外的空白。相反，我们将此样式添加到 popover-content 中。
.popover-content {
white-space: pre-wrap;
}
回答by Karvan
You just need to add data-html="true" to your tag then all your html tags inside the help text work fine,
您只需将 data-html="true" 添加到您的标签中，然后帮助文本中的所有 html 标签都可以正常工作，
