未设置white-space:nowrap时，text-overflow:ellipsis为何仍生效？

我了解text-overflow: ellipsis生效需满足以下条件：

• 元素需设置width或max-width
• overflow属性需设为hidden、scroll、auto或clip
• white-space属性需设为nowrap

但我未设置white-space:nowrap;，text-overflow: ellipsis却依然生效，这是为什么？

以下是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>doubt</title>
    <style>
        .box {
            border: 2px solid black;
            width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo voluptatibus nam, quos error voluptate temporibus
        voluptates, optio eum hic vero eligendi nobis non officia maiores, enim nemo nihil illo. Natus sapiente odio
        esse est.
    </div>
</body>
</html>

效果截图：

我对此感到困惑，希望得到解答。

解答 #

这是因为现代浏览器针对块级元素的第一行文本，在满足overflow:hidden和固定宽度的情况下，会默认对第一行应用类似white-space:nowrap的省略行为，但这其实是浏览器的兼容优化，并非CSS标准规范中的要求。

按照标准规范，text-overflow: ellipsis确实需要white-space:nowrap才能生效，因为text-overflow仅作用于未换行的、溢出的文本内容。你看到的效果是浏览器的特殊处理：当块级元素内的文本第一行溢出容器时，浏览器自动为第一行文本添加了省略号，而后续的文本被overflow:hidden直接隐藏了，并非整个段落都被压缩到一行后显示省略号。

如果仔细观察会发现，只有第一行文本显示了省略号，剩下的文本都被截断隐藏了，和设置white-space:nowrap后整行文本溢出显示省略的效果本质不同。这种行为是浏览器为提升用户体验做的非标准兼容，并不是text-overflow在无white-space:nowrap下的标准生效场景。

为了保证跨浏览器的一致性，建议还是按照标准规范添加white-space:nowrap属性，避免依赖浏览器的特殊行为。

内容的提问来源于stack exchange，提问作者Rishabh Gaur