CSS ellipsis with inline elements?

Question

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?

Giddings

Answer 1

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.

Levite

that'll work, but it's not supported in down-level browsers. not so much of an issue nowadays, as the current share of browsers that support it properly is much higher ... caniuse.com/inline-block i guess it's time to start using it :P – Shankle

@Xander - Which browsers were you thinking of? How far back do you want to go?? Firefox v3.0 supports it (even FF2 with a prefix). And in the IE world, even IE6 supports inline-block. It has bugs in IE6/7, but it's there. If you need to support IE6/7, it's good to know about the bugs, but it shouldn't stop you using it. – Levite

By the way, the ellipsis only shows for "display: inline-block;" if there is a specified width as well. My issue was that I did not have a "width" or a "max-width". – Plantain

Answer 2

You cannot apply text-overflow to inline elements.

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

Shankle

The same applies to normal overflow? Because the span expands with the text. – Giddings