gpt4 book ai didi

css - ngx-bootstrap popover 显示在一行中,文本超出 popover

转载 作者:太空狗 更新时间:2023-10-29 18:15:15 26 4
gpt4 key购买 nike

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

<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;" 这是很奇怪。

最佳答案

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

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

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

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

关于css - ngx-bootstrap popover 显示在一行中,文本超出 popover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49303720/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com