CSS ellipsis with inline elements?

html css ellipsis
Web Devie picture Web Devie · Jul 24, 2013 · Viewed 17.7k times · Source

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?

Answer

Spudley picture Spudley · Jul 24, 2013

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.

Related questions

Applying an ellipsis to multiline text

Is there a solution to add ellipsis on last line inside a div with a fluid height (20%)? I found the -webkit-line-clamp function in CSS, but in my case the line number will be depending on window size. p { width:100%; height:20%; …

Read More
With CSS, use "..." for overflowed block of multi-lines

with overflow: hidden; text-overflow: ellipsis; white-space: nowrap; "..." will be shown in the end of the line if overflowed. However, this will be shown only in one line. But I would like it to be shown in multi-lines. It may looks …

Read More
HTML - how can I show tooltip ONLY when ellipsis is activated

I have got a span with dynamic data in my page, with ellipsis style. .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; I'd like to …

Read More