Bootstrap弹出框内的断线

Posted 2023-05-08

【中文标题】Bootstrap弹出框内的断线

【英文标题】：Breaking line inside Bootstrap popover

【发布时间】：2018-09-27 07:36:58

【问题描述】：

我正在使用
 在引导弹出窗口data-content 属性内换行，但它不起作用。这怎么可能？ 也可以在里面做一些加粗的内容吗？

$(document).ready(function()
    $('[data-toggle="popover"]').popover();   
);

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></script>
<div class="container">
  <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Hello, i need &#013; to break line.">hover me</a>
</div>

【问题讨论】：

Bootstrap popover hides line breaks的可能重复

Try this

【参考方案1】：

$(document).ready(function()
    $('[data-toggle="popover"]').popover();   
);

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></script>
<div class="container">
  <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Hello, i need <br /> to break line.<b>BOLD HERE</b>" data-html="true">hover me</a>
</div>

使用data-html="true" 和<br/>

【讨论】：

是的，但这是推荐的做法。 :) @GragasIncoming

另外，如果它解决了您的问题，请将答案标记为已接受，以便将来帮助他人。 :) @GragasIncoming

是的，我会的。是否可以在内容中添加一些粗体文本？

查看我的答案我已经更新了。 @GragasIncoming

【参考方案2】：

使用<br />在popover中换行

【讨论】：

和data-html="true"