带内联元素的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