ngx-bootstrap popover 显示在一行中，Text超出popover

Question

当尝试使用此模板在一行中显示弹出窗口时：

<ng-template #popTemplate>Here we go: <div [innerHtml]="html" class="myClass"></div></ng-template>
<button type="button" class="btn btn-success"
      [popover]="popTemplate" popoverTitle="Dynamic html inside">
  Show me popover with html
</button>

然后添加一个 CSS class 比如：

myClass {
    white space: nowrap;
}

那么文本超出了弹出窗口本身。

我尝试添加 container="body" 或 [container]="body" ngx-bootstrap 文档，但它不起作用

是否有任何正确的方法可以让弹出窗口包含所有内容文本？

当内容文本很长时会发生这种情况。

我看过这个答案：

Ngx-Bootstrap popover not setting correct height or width

但它不起作用。

更新：

现在，我可以在调试器中看到弹出窗口，通过将鼠标悬停在工具提示上，以下代码添加了伪 class ::before

<popover-container role="tooltip" style="display: block; top: -6px; left: 310px;" 
    _nghost-c3 class="popover in popover-right bs-popover-right right">
    ...
</popover-container>

我不知道310px这个值是从哪里来的，但看起来ngx-bootstrap没有响应提供的CSS

直接在模板的 div 中尝试内联 CSS 作为：

style="display: inline-block; min-width: 100%; white-space: nowrap;"

不要太工作

我发现即使你放了一个内联CSS，生成的样式也和上面模板中的一样style="display: block; top: -6px; left: 310px;"，这很奇怪。

Answer 1

将 max-width: 100%; 添加到 myClass

.myClass {
    white-space: nowrap;
    max-width: 100%;
}

Answer 2

最后我找到了正确的解决方案 CSS:

.popover {
    white-space: nowrap;
    max-width: none;
}

因为我们可以在为这个弹出窗口生成的 html 代码中看到（见问题），使用了 5 个类，然后我使用其中一个来应用相关的 CSS.

而且我必须在弹出窗口自定义组件（它使用要显示的输入文本）中将 encapsulation 设置为 ViewEncapsulation.None

ngx-bootstrap popover 显示在一行中，Text超出popover

ngx-bootstrap popover display in one line, Text goes beyond the popover

css

ngx-bootstrap

angular

ngx-bootstrap-popover