htmlcssoverflowellipsis

How is `text-overflow: ellipsis` working here, when the required conditions aren't meeting?

I know that for text-overflow: ellipsis to work, a few conditions must be met:

I have not used white-space:nowrap; then how is text-overflow: ellipsis still working?

Here's my code

<!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>

enter image description here

I don't know what to do, I'm just confused.

Solution

  • This statement is incorrect:

    The white-space property must be set to nowrap.

    This is not actually true. You might find this stated on some websites, but it does not agree with the CSS specification. Here:

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

    Text can overflow for example when it is prevented from wrapping (e.g. due to white-space: nowrap or a single word is too long to fit).

    The behaviour you are seeing is completely correct.