Bootstrap Popover - 顶部的空白空间答案

【问题标题】：Bootstrap Popover - Empty space at topBootstrap Popover - 顶部的空白空间
【发布时间】：2015-02-05 13:02:54
【问题描述】：

我正在使用 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

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

【问题讨论】：

任何要检查的 url 或 jsfiddle 示例以查看问题，否则无济于事？
同意@NadeemmnnMohd，如果没有代码示例和/或小提琴、plunker 等错误证明，就不可能回答。

标签： html css twitter-bootstrap tooltip popover

【解决方案1】：

问题在于 CSS

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

改成

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

}

然后工作正常

【讨论】：

我想保留新行，用你的解决方案新行被废弃。

【解决方案2】：

将空白规则放在 .popover-content 上（而不是放在 .popover 上）

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

【讨论】：