I know that for text-overflow: ellipsis to work, a few conditions must be met:
- The element must have a set
widthormax-width. - The overflow property must be set to
hidden,scroll,auto, orclip. - The white-space property must be set to nowrap.
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.
New contributor
Rishabh Gaur is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.