.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..
这里这么多人,但只有三四个全局应用成长起来了?
为什么?
最佳答案
文本溢出只能发生在 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;
。
关于html - overflow-x 跨度内的文本溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41126157/