如何在引导工具提示中添加空行答案

【问题标题】：How do I add blank lines into a Bootstrap Tooltip如何在引导工具提示中添加空行
【发布时间】：2017-09-13 19:38:30
【问题描述】：

我正在开发一个网站，该网站具有人们可以订购的不同功能。我想在这些功能旁边放一个引导字形图标，然后当用户翻过字形图标时，工具提示会显示这些功能中包含的内容。我无法在工具提示中引入空行。我已经尝试过 \n
和（在我的 css 中使用 pre-wrap 命令）这是我的代码中与工具提示相对应的部分。

<br/>2 Printed Sheets
  <a href="#" data-toggle = "tooltip" title = 
    "One printed sheet can include &#013;1 8 x 10 &#013;2 5 x 7 &#013;2 4 x 6 &#013;4 3.5 x 5 &#013;9 wallet photos">
    <span style = "color:white" class="glyphicon glyphicon-question-sign white"></span>
  </a>

我也在使用下面的 JQuery 命令：

<script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
  });
</script>

如何在所在的位置放置空行。值得注意的是，在我在 JQuery 部分添加之前，空行确实可以正常工作，但是当我在 JQuery 部分添加时，换行符被删除了。

【问题讨论】：

查看下面的例子。

标签： jquery html css twitter-bootstrap line-breaks

【解决方案1】：

设置html为true并在title属性中使用<br>，也可以设置data属性data-html="true"

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({
        html:"true"
    });   
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<h1>Tooltip below</h1>
          <a href="#" data-toggle = "tooltip" data-placement = "down" title="One printed sheet can include &#013;<br></a>1 8 x 10 &#013;<br></a>2 5 x 7 &#013;<br></a>2 4 x 6 &#013;<br></a>4 3.5 x 5 &#013;<br></a>9 wallet photos">
          <span style = "color:white" class="glyphicon glyphicon-question-sign white"></span>Tooltip
        </a>

演示：https://bootsnipp.com/user/snippets/BE2dE

【讨论】：

【解决方案2】：

你可以加<br />

   title="1st line of text <br> 2nd line of text"

  title = 
        "One printed sheet can include <br>
            1 8 x 10 <br>
            2 5 x 7 <br>
            2 4 x 6 <br>
            4 3.5 x 5 <br>
            9 wallet photos"

【讨论】：

【解决方案3】：

在 data-toggle 旁边添加 data-html="true" 属性，然后您可以在标题内的任何地方使用 breakrow 标签来实现新行

【讨论】：