文本溢出不适用于内联块元素。

Question

在下面的HTML中，我希望省略号显示在cell2中。如果cell2是块元素，则会发生这种情况，但如果它是内联块元素，则不会发生（尽管各种来源状态否则）。

我如何使inline-block元素显示文本省略号？

.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>

示例：http://jsbin.com/pucovoboce/1/edit

- Wolf

Answer 1

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

- Alex W

Answer 2

你需要设置宽度。

如果你想要这种溢出但仍然保持内联块的行为，请尝试添加以下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;

为此，该元素必须放置在自己的一行中。

- GDY

Answer 3

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

- Leo Farmer