嵌套元素中的文本溢出省略号问题以及 Flexbox 列方向上的工具提示

Question

我有一个两栏布局，左侧部分占 80%，右侧部分占 20%

在右侧部分，我有一个要显示的项目列表，其中的文本可以大于右侧部分的宽度。

在我的例子中，需要在其下显示省略号的文本的父 div 是一个工具提示（通过基于引导的工具提示演示），但显示工具提示时，文本不会显示省略号。

请参考这个fiddle来了解我的问题。

其他四个列表项显示有省略号，因为它们在

list-item

类下的样式正确。

我已经提到了这个答案，因为它几乎与我的问题相似，但该解决方案对我不起作用。

有人可以让我知道我的用例中缺少什么吗？

Answer 1

这些样式仅适用于

.list-item

，如果你想在里面的div中获得相同的效果，只需添加以下内容：

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