6

在我的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.

任何“顺利”的想法如何使它更好？非常感谢您的意见。

4

1 回答 1

0

这是一个一般性答案，但请检查 div 上的宽度与最小宽度设置。此外，span 是一个内联元素，没有宽度等块级属性。您要么需要使用另一个 div，要么需要在 CSS 中将 span 定义为 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>
于 2017-04-06T20:40:00.600 回答