html - Bootstrap Popover - 顶部空白

Question

我正在使用 angular bootstrap 来创建弹出窗口。

由于某些原因，创建弹出窗口时，弹出窗口的顶部留有很多空间。请检查所附图片。

灰色矩形是我的文本 [我必须将其隐藏]，您可以在矩形顶部看到很多空白区域。我不确定是什么 css 样式导致的。

这些是 popover 唯一关注的 CSS 样式。

.popover {
    white-space: pre-wrap !important;
}


.popover-content {
    color: black !important;
    font-size: 14px;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
}

更新:

这是直播 demo

我知道它是导致它的预换行，我想要的是弹出窗口文本居中对齐，换行并不会溢出弹出窗口。

Answer 1

问题出在 CSS 上

.popover {
    white-space: pre-wrap !important;
}

改为

.popover {
white-space: normal !important;
word-break: break-all!important;

然后工作正常