How to truncate text of last item in horizontal ul list

I got it 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; 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>

JSFiddle

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>

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>