Question

 .whysolong {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

加入div

<div class="whysolong">So many people here but only 3 or four global apps grow UP?</div>

OK！

这里有这么多人......

和span

<span class="whysolong">So many people here but only 3 or four global apps grow UP?</span>

仍然显示全文..

这里有这么多人，但只有3到4个全球应用程序在增长？

为什么？

Answer 1

文本溢出只能发生在块或内联块级元素上，因为元素需要有一个宽度才能溢出。溢出发生在由direction property或相关属性确定的方向上。

 .whysolong {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 154px;
}

 .whysolongblock {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 154px;
  display: block;
}

<div class="whysolong">So many people here but only 3 or four global apps grow UP?</div>
<span class="whysolong">So many people here but only 3 or four global apps grow UP?</span>
<div class="whysolongblock">So many people here but only 3 or four global apps grow UP?</div>
<span class="whysolongblock">So many people here but only 3 or four global apps grow UP?</span>

注意： text-overflow仅在容器的overflow属性值为hidden，scroll或auto和white-space: nowrap;时发生

Answer 2

span必须具有块或内联块显示，否则它只是一个内联元素。

Answer 3

DIV和SPAN之间存在差异，因为一个是块元素而另一个是内联元素。

你可以看到： What is the difference between HTML tags <div> and <span>?

http://cssreset.com/understanding-the-difference-between-div-and-span/

Answer 4

属性text-overflow仅适用于块容器元素。默认情况下，<span>元素是内联元素，因此它不支持此属性。要使<span>支持text-overflow，您需要将其定义为块级元素：

span {
    display: block;
    text-overflow: ellipsis;

}

溢出-x文本溢出的跨度

4 个答案: