无法获得“文本溢出：省略号”以使用两个相邻的span元素

Question

我一直在尝试使用display: inline-block在两个长度彼此相邻的文本两长时间内显示省略号：

以下是小提琴中简化的CSS：

https://jsfiddle.net/IQAndreas/fffo84nq/1/

事实上，我甚至无法overflow: none正确显示。那两个span元素给了我一些麻烦。

Answer 1

您需要将这些样式添加到menu-element

.menu-element {
    background-color: #DDDDDD;
    width: 100%;
    cursor: pointer;
  overflow:hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

更新了fiddle

Answer 2

需要指定ellipsis的工作宽度

#palette-menu .palette-name {
    height: 100%;
    vertical-align: middle;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

   display: inline-block;
    width: 66%;
}

<强> DEMO