带省略元素的CSS省略号？

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

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

，我没有在这个解决方案喜欢的唯一的事情是，我必须设置display: block的元素（跨度）。没有它，宽度参数被忽略，跨度扩展到文本大小。

是否有可能使省略号与内联元素一起工作（不会更改display至block）？如果是的话，该如何实现？

来源

2013-07-24 Web Devie

有一个display选项，可以作为inline和block，专为正是这种情况之间的中途宿舍......

这就是所谓的

display:inline-block;

使用此代替block，并且您的元素仍然会流入您的内容，就好像它是inline一样，但会充当block为其内容，这意味着你的省略号应该工作。

来源

2013-07-24 15:33:43 Spudley

可以工作，但它在低级浏览器中不受支持。不是现在这个问题，因为当前支持它的浏览器份额要高得多...... http://caniuse.com/inline-block我想是时候开始使用它了：P – xandercoded

@Xander - 你在想什么浏览器？你想走多远？ Firefox v3.0支持它（甚至带有前缀的FF2）。而在IE世界中，即使IE6支持'inline-block'。它在IE6/7中有错误，但它在那里。如果您需要支持IE6/7，最好了解错误，但不应阻止您使用它。 – Spudley

顺便说一下，省略号仅显示“display：inline-block;”如果还有指定的宽度。我的问题是我没有“宽度”或“最大宽度”。 – Tyler

您不能将text-overflow应用于内联元素。

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

来源

2013-07-24 15:22:25 xandercoded

这同样适用于正常溢出？因为跨度随文本扩展。 –

带省略元素的CSS省略号？

回答

相关问题