如何将空白行添加到 Bootstrap 工具提示中

Question

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

<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 部分时，换行符被删除了。

Answer 1

您可以添加 <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"

Answer 2

将 html 设置为 true 并在标题属性中使用 <br>，或者您也可以将数据属性设置为 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

Answer 3

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

如何将空白行添加到 Bootstrap 工具提示中

How do I add blank lines into a Bootstrap Tooltip

html

css

jquery

line-breaks

twitter-bootstrap