Question

这是在Bootstrap Popover中使用的。

可以查看正在开发的实时页面here

这很简单但我无法在任何地方找到它。在数据内容属性中，我想强制在“评估日期：10月11日 - 13日和结果：CR = ...之间的段落或换行符使用BR或P标签不起作用，它显示文字标签。在Javascript中强制换行符你使用\ n如何在带引号的字符串中用HTML做同样的事情？

     <td class="setWidth concat"><div class="boldTitle"><a href="#" 
     class="tip"  rel="popover" data-trigger="hover"  
     data-placement="top" 

     data-content="Date Assessed: 10-Nov-13 <br /> 
     Results: Cr = 2.2 mg/dl" 

        data-original-title="Out of Range">
          <span style="color:red"  
       class="glyphicon glyphicon-warning-sign"></span> &nbsp; Cr = 2.2 mg/dL</a></div></td>

Answer 1

请参阅上次更新：Bootstrap使您能够指定内容是HTML而不是文本。

这完全取决于bootstrap对popover效果的实现。如果他们正在使用$('.popover').html($(this).data('content'))那么它应该＆＃34;只是工作＆＃34;。如果他们使用$('.popover').text($(this).data('content'))或以其他方式首先逃避data-attribute的结果，那么它可能会赢得

。

如果bootstrap的实现没有按照您希望的方式运行，那么您可以通过编写自己的javascript来处理您正在寻找的效果，从而为您提供更好的服务。

请参阅此小提琴，了解data-attribute正确工作的换行符示例：

http://jsfiddle.net/g32tw/1/

更新：我已经使用第二个链接更新了小提琴，这个链接会产生您遇到的错误，这很可能是bootstrap的实现方式。

更新：刚看了一下bootstrap的文档。您是否尝试将"data-html" = "true"添加到元素中？

来源：http://getbootstrap.com/javascript/#popovers-usage

注意这一点 - 如果内容是使用html选项提供的最终用户，则可能会使您遇到XSS攻击漏洞。如果您信任这些数据，那就没事了。有关跨站点脚本的信息，请参阅https://www.acunetix.com/websitesecurity/cross-site-scripting/。

Answer 2

我不确定你能不能。您可以尝试使用两个数据项：

data-assessdate="Date Assessed: 10-Nov-13" 
data-results="Cr = 2.2 mg/dl"

然后使用Javascript重新组合，然后显示：

var summary = this.dataset;
var newhtml=summary.assessdate . "<br />" . summary.results;

然后将newhtml写入您想要的DOM。

在HTML中强制字符串中的换行符，等同于HTML中的\ n

2 个答案: