html - Angular 应用程序中的 NgbTooltip 位置

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，那么它将被截断并按预期附加“...”，工具提示显示在 中心的顶部>分区。这对这种情况很好，但是当内容很短时，它看起来很难看:

<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 是一个内联元素，没有像 width 这样的 block 级属性。您要么需要使用另一个 div，要么需要将 span 定义为 display:inline-block 在您的 CSS 中。

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