带内联元素的CSS省略号？

Question

我已经调整了jQuery UI MultiSelect Widget，以便文本显示所有选定的标签，但是如果选择了太多的元素来显示，则文本将被修剪和省略。我已经这样做了：

.ui-multiselect .selected-text {
    display: block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

我在该解决方案中唯一不喜欢的是我必须将display: block设置为元素（span）。如果没有它，则忽略width参数，并将范围扩展为文本大小。

是否可以使用省略号来处理内联元素（不将display更改为block）？如果是这样，如何实现呢？

Answer 1

有一个display选项可用作inline和block之间的中途住宅，专为此类情况而设计......

它被称为

display:inline-block;

使用此代替block，您的元素仍将在您的内容中流动，就像它是inline一样，但对其内容将充当block，这意味着您的省略号应该工作。

Answer 2

您无法将text-overflow应用于内联元素。

http://dev.w3.org/csswg/css-ui/#text-overflow