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

您需要在cell2上设置显式宽度，以便text-overflow可以计算何时生效并添加省略号。

Answer 2

您需要在.cell2上设置文本溢出的宽度：省略号才能生效

Answer 3

You have to set a width.

If you want this overflow but still the behaviour of a inline block try adding this CSS:

max-width: 100%;

box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box;  
-o-box-sizing: border-box;
-ms-box-sizing: border-box;

For this the element have to be placed in his own line.