NgbTooltip 在 Angular 应用程序中的位置

Question

在我的Angular2/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，那么它将被截断并按预期附加“...”，并且工具提示显示在 的中心顶部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.

有什么“平滑”的想法可以让它变得更好吗？我非常感谢您的意见。

Answer 1

这是一个一般性的答案，但请检查 div 上的宽度与最小宽度设置。此外，span 是一个内联元素，没有宽度等块级属性。您要么需要使用另一个 div，要么需要在 CSS 中将跨度定义为 display:inline-block。

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

所以，基本上，你最终会得到这样的结果（我将 min-width: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>