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?

Accepted Answer

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 ellipsis with inline elements?

Solution

Problem