Bootstrap Popover内换行失效及内容加粗实现问题

数据老陈

2026-5-25

Bootstrap Popover换行失效与加粗设置问题解答

嘿，我来帮你搞定这个Popover的问题～

为什么``换行不生效？

Bootstrap 3的Popover组件默认会把data-content里的内容当作纯文本处理，它会自动转义所有HTML实体（比如你用的）和HTML标签，所以这些内容不会被浏览器解析成换行效果。而且本身是回车符，在HTML环境里本来就不会直接渲染成换行，通常我们都是用<br>标签来实现换行的。

怎么实现换行+加粗效果？

核心是给Popover开启html: true配置，让组件允许解析内容里的HTML代码，这样不管是换行标签还是加粗标签都能生效。

修改后的完整代码示例

<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>

<!-- 示例按钮，data-content里直接写HTML标签 -->
<button type="button" class="btn btn-default" 
        data-toggle="popover" 
        title="示例Popover" 
        data-content="第一行内容<br>第二行内容，这里可以<b>加粗显示</b>或者用<strong>strong标签加粗</strong>">
  点击弹出Popover
</button>

<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover({
    html: true // 关键：开启HTML解析模式
  });
});
</script>

额外小提示

如果你不想用<br>，想靠换行符实现换行，可以在开启html: true后，给Popover的内容容器加CSS样式：
```
.popover-content {
  white-space: pre-line;
}
```
这样data-content里的或者直接写的换行符就能被解析成换行，但这种方式不如<br>直观。
注意安全：如果data-content的内容来自用户输入，开启html: true会存在XSS攻击风险，一定要先对用户输入做过滤处理。