块级元素是否支持文本溢出：省略号答案

【问题标题】：Do block level elements support text-overflow: ellipsis块级元素是否支持文本溢出：省略号
【发布时间】：2014-10-21 01:50:46
【问题描述】：

当我的文本溢出 div 时，它没有被省略号截断。

通常这很容易实现，只需将text-overflow: ellipsis 和overflow-x: hidden CSS 属性添加到文本容器即可。

如果您将<p> 更改为<span>，它会起作用。谷歌搜索后，看起来块和内联块元素都支持文本溢出：省略号。那为什么会这样呢？

HTML：

<div>
    <p>Test text that is going to overflow</p>
</div>

CSS：

div {
    width: 100px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid red;
}

【问题讨论】：

标签： html css

【解决方案1】：

看起来如果你修改p标签就可以了：

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

这也来自 MDN...看起来它适用于块元素：

"This property only affects content that is overflowing a block container 
element in its inline progression direction."

【讨论】：