当所需条件不满足时，“text-overflow: ellipsis”如何在这里工作？

Question

我知道要让

text-overflow: ellipsis

发挥作用，必须满足一些条件：

该元素必须有一个集合
```
width
```
或
```
max-width
```
。
溢出属性必须设置为
```
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>

我不知道该怎么办，我只是很困惑。

Answer 1

此说法不正确：

white-space 属性必须设置为 nowrap。

这实际上不是真的。您可能会在某些网站上看到这样的说明，但它并不符合 CSS 规范。这里：

https://www.w3.org/TR/css-overflow-3/#propdef-text-overflow

例如，当文本无法换行时（例如由于空格：nowrap 或单个单词太长而无法容纳），文本可能会溢出。

您所看到的行为是完全正确的。

当所需条件不满足时，“text-overflow: ellipsis”如何在这里工作？

问题描述投票：0回答：1

1个回答

最新问题

当所需条件不满足时，“text-overflow: ellipsis”如何在这里工作？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1