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

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