html - overflow-x 跨度内的文本溢出

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>

好的!

这么多人....

和span

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

Still showing full text..

这里这么多人，但只有三四个全局应用成长起来了？

为什么？

Answer 1

文本溢出只能发生在 block 级或行内 block 级元素上，因为元素需要有宽度才能溢出。溢出发生在由 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;。