Bootstrap Popover - 顶部的空白空间

Question

我正在使用角度引导来创建一个弹出窗口。

由于某种原因，在创建弹出窗口时，弹出框顶部会留下大量空间。请查看附件中的图片。

灰色矩形是我的文字[我必须隐藏它]，你可以看到矩形顶部有很多空白区域。我不确定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

我知道它是pre-wrap导致它，我想要的是popover文本在中心对齐，包裹在新行并且不会溢出popver窗口。

Answer 1

问题在于CSS

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

更改为

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

}

然后工作正常

Answer 2

将空白区域规则放在.popover内容（不是.popover）

上

.popover-content {
    white-space: pre-line;
}