How to truncate text of last item in horizontal ul list

Question

I have an HTML list as follows...

<ul>
    <li>Some text</li>
    <li>Some more text</li>
    <li>Even more text</li>
</ul>

...and I'm using display: inline-block; to keep the list items on a single horizontal line.

The ul's width is limited and I want to truncate the last item using an ellipsis when it doesn't fit into that width.

So needs to look something like:

Some text Some more text Even mo...

I've tried using text-overflow: ellipsis; on the ul, but to no effect.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}
li {
  display: inline-block;
  margin-right: 10px
}

<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Even more text</li>
</ul>

Here's a fiddle

Lapides

Answer 1

I got it to work when setting <li> to display: inline.

The specification for text-overflow states that it only applies to block elements. I guess having display: inline-block on <li> lets them have their own block context and thus the parent's text-overflow property isn't applied anymore.

ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 250px;
}

li {
  display: inline;
  margin-right: 10px
}

<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Even more text</li>
</ul>

JSFiddle

Woehick

Answer 2

because you are appying it to ul instead you should apply to li, see below:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0
}
li {
  display: inline-block;
  vertical-align:top;
  margin-right: 10px;
  max-width: 110px
}
li:last-of-type {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Some even more text</li>
</ul>

Torn

This clips all list elements, not only the last. – Woehick

Thanks - yes I know that I could clip each individual item and that might be the only way to solve it, but I was hoping to clip just the last one. – Lapides

Thanks, that is a pretty good compromise. I'll see if anyone has anything more complete, otherwise will mark this as the answer. – Lapides

Answer 3

It appears that Chrome is not behaving correctly, Firefox and IE add the ellipsis after the second li which appears to be correct behaviour:

For the ellipsis and string values, implementations must hide characters and atomic inline-level elements at the applicable edge(s) of the line as necessary to fit the ellipsis/string. Place the ellipsis/string immediately adjacent to the applicable edge(s) of the remaining inline content. The first character or atomic inline-level element on a line must be clipped rather than ellipsed.

Overflow Ellipsis: the ‘text-overflow’ property (http://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0)

inline-block elements are classed as atomic inline-level elements:

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

Inline-level elements and inline boxes (http://www.w3.org/TR/CSS21/visuren.html#inline-boxes)

Which according to the first quote suggests that the whole li should be replaced with the ellipses like Firefox and IE do.

To make this work consistently across a range of browsers change the li from display: inline-block; to display: inline;.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}
li {
  display: inline;
  margin-right: 10px
}

<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Even more text</li>
</ul>

Naoise

In Firefox his original code clips away the entire last list item, not only part of its text. I guess this is correct behavior and still a bug in Chrome. – Woehick

@Woehick That is true, although it does at least show the ellipsis. Looks like there is a difference in how the browsers choose to handle this particular instance. – Naoise

Yep, true. Safari handles it like Chrome does. Then again, IE behaves like Firefox. Guess, that's not really well defined after all. – Woehick

I was just about to say the same about IE. Think you could be right that this is somewhat due to the inline-block elements creating a new block context, it's just that the browsers handle it in a different way. – Naoise

I suggest this as the accepted answer. More complete than mine and explains what exactly happens. – Woehick

It's nice of you to suggest that @maryisdead. In fairness it was your comments that prompted me to dig a bit deeper into the possible reason behind this behaviour. – Naoise

Thanks sire, this is of much help to me. Much obliged – Damara

It should be noted that if we have display: flex on ul, this solution doesn't work. – Burse