css - ngx-bootstrap popover 显示在一行中，文本超出 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 类，例如:

myClass {
    white space: nowrap;
}

然后文本超出了弹出窗口本身。

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

有没有什么合适的方法可以让弹出窗口中包含所有内容文本？

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

我看过这个答案:

Ngx-Bootstrap popover not setting correct height or width

但它不起作用。

更新:

现在，我可以在调试器中看到弹出窗口，通过将鼠标悬停在工具提示上，以下代码添加了伪类 ::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

最后我通过使用这个 CSS 找到了正确的解决方案:

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

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

我必须将encapsulation 设置为ViewEncapsulation.None在 popover 自定义组件中(它使用要显示的输入文本)