css – Explain on the property text-overflow: ellipsis


Good afternoon, I did not fully understand the property

 text-overflow: ellipsis;

it only works for text in one line paired with the property

 white-space: nowrap;

you need to make the effect of cropping the text beautifully, the gradient will not work, can anyone know to do this with the effect of ellipsis?


.text {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
  overflow: hidden;
<div class="text">text text text text text text text text text</div>

a source

Scroll to Top