text-overflow doesn't work with inline-block elements

Question

In the HTML below, I expect ellipses to show in cell2. This happens if cell2 is a block element, but not if it's an inline-block element (although various sources state otherwise).

How can I make text-ellipsis show for inline-block elements?

.outer {
   width: 200px;
   height: 400px;
   background-color: whitesmoke;
   overflow: hidden;
   white-space: nowrap;
}

.cell1 {
   background: red;
   display: inline-block;
}

.cell2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

<div class="outer">
    <span class="cell1">hey</span>
    <span class="cell2">
        hi there, this is a very long block of text
    </span>
</div>

Demo: http://jsbin.com/pucovoboce/1/edit

Answer 1

You need to set an explicit width on cell2, so that text-overflow can compute when it should take effect and add an ellipsis.