ngx-bootstrap 弹出框显示在一行，文本超出弹出框

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"，但它不起作用 p>

是否有任何适当的方法让弹出框在其中包含所有内容文本？

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

我看过这个答案：

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（它使用输入文本，以便显示）

Answer 2

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

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