Question

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

如何为内联块元素显示文本省略号？

.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

Answer 1

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

Answer 2

您需要在.cell2上为文本溢出设置宽度：省略号才能工作

Answer 3

你必须设置一个宽度。

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

为此，元素必须放在他自己的行中。

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

3 个答案: