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”，但它无法正常工作

是否有任何正确的方法让popover中包含所有内容文本？

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

我看过这个答案：

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代码中看到这个popover（请参阅问题），使用了5个类，然后我使用其中一个来应用相关的CSS。

我要在弹出式自定义组件（使用输入文本显示）中将encapsulation设置为ViewEncapsulation.None

Answer 2

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

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

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

2 个答案: