内联元素的CSS省略号？ [英] CSS ellipsis with inline elements?

问题描述

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

  .ui-multiselect .selected-text {
显示：块; 
最大宽度：190px; 
 overflow：hidden; 
文本溢出：省略号; 
 white-space：nowrap; 
} 
  

我唯一不喜欢的解决方案是我有设置 display：block 到元素（span）。没有它，宽度参数被忽略，范围扩展到文本大小。

是否有可能使省略号与内联元素一起工作（不需要更改显示为 block ）？如果是这样，如何实现这一点？

解决方案

有一个显示选项，作为 inline 和 block 之间的中间房屋，专为这种情况而设计......

它被称为

  display：inline-block; 
  

使用这个而不是 block ，元素仍然会在内容中流动，就好像它是 inline ，但是它的内容将作为块来运行，意味着你的省略号应该可以工作。

I've adapted jQuery UI MultiSelect Widget so that the text would show all selected labels, but if too many elements are selected to display, the text would be trimmed and ellipsed. I've done it so:

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

The only things that I don't like in that solution is that I had to set display: block to the element (span). Without it, the width parameter was ignored and the span expanded to the text size.

Is it possible to get ellipsis to work with inline elements (without changing display to block)? If so, how to achieve that?

解决方案

There is a display option that works as a half-way house between inline and block, designed for exactly this kind of situation...

it's called

display:inline-block;

Use this instead of block, and your element will still flow in your content as if it were inline, but will act as a block for its contents, which means your ellipsis should work.

这篇关于内联元素的CSS省略号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！