Html NGB角度应用中的刀尖位置

在我的

Angular

2/4应用程序中，我使用了

ng bootstrap

及其组件

NgbTooltip

假设以下

HTML

snippet

<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>

我对我的实现还不满意，也许有人能帮我找到一个优雅的解决方案：

假设文本不适合

div

，则它将按预期被截断并附加“…”，并且工具提示显示在

div

中间的顶部。这对这种情况很好，但当内容很短时，它看起来很难看：

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

但这一解决办法引发了另一个问题，如图所示：

现在的问题是跨度被截断了，但实际上比

div

更宽。工具提示呈现在<代码>跨度而不是<代码> div < /代码>

---

有没有什么“顺利”的办法让它变得更好？非常感谢您的输入。

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

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

因此，基本上，您会得到这样的结果（我将最小宽度：150px内联，但当然在样式表中这样会更好）：

.文本省略号{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
宽度：100%；
}
非常长的文本不适合非常长的文本不适合非常长的文本不适合非常长的文本不适合非常长的文本不适合非常长的文本不适合

这是你想要的吗？@Winnemucca实际上还没有。。。

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

<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>