NgbTooltip在Angular应用程序中的位置

Question

在我的Angular 2/4申请中，我使用ng-bootstrap及其组件NgbTooltip。

假设以下HTML代码段

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
    A very long text that does not fit
</div>

使用给定的自定义CSS

.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

我对我的实施不满意，也许有人可以帮我找到解决问题的优雅方法：

假设文字不适合div，那么它将被截断并附加＆＃34; ...＆＃34;正如预期的那样，工具提示显示在div中心的顶部。这对于这种情况很有用，但是当内容非常短时，它看起来很难看：

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'1.jpg'" 
     placement="top" 
     container="body">
    1.jpg
</div>

现在工具提示仍然显示在div的顶部中心，但是显示在文本的右侧（因为它太短但div仍然是整个宽度）。

我认为我可以使用span元素轻松解决此问题，并在其上设置工具提示而不是div：

<div class="col-sm-8 text-ellipsis">
    <span  
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
        A very long text that does not fit
    </span>
</div>

但是这种解决方法引发了另一个问题，如下所示：

现在的问题是跨度被截断，但实际上比div更宽。工具提示会在span而不是div。

的中间呈现

任何＆＃34;顺利＆＃34;想法如何使这更好？我非常感谢你的投入。

Answer 1

这是一般性答案，但请检查div上的宽度与最小宽度设置。此外，span是内联元素，并且没有像width这样的块级属性。您需要使用另一个div，或者需要将span定义为显示：CSS中的inline-block。

对于外部div，设置一个最小宽度，您希望省略号开始出现（比如大约150px）。从div中删除text-ellipsis类并将其放在span上。对于span元素，添加100％的宽度并使其成为内联块（或者只使用另一个div）

所以，基本上，你最终得到这样的东西（我把最小宽度：150px内联，但当然这在样式表中会更好）：

<style>
    .text-ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
    }
</style>

<div class="col-sm-8" style="min-width: 150px">
    <div class="text-ellipsis" ngbTooltip="A very long text that does not fit" placement="top" container="body">
        A very long text that does not fit A very long text that does not fit A very long text that does not fitA very long text that does not fit A very long text that does not fit
    </div>
</div>