Good afternoon, do 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 text clipping effect beautiful, the gradient will not work, can anyone know how to do this with the ellipsis effect?

1 answer 1

.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

  • So I asked about this, you can do the same for only a few lines of text, let's say a block contains 3 lines and the last one ends with an ellipsis? - Constantine Shibaev
  • one
    Well, if you only apply JavaScript - Amandi
  • one
    @Constantine Shibaev, the ellipsis property works only for a single line of text. Using css, this doesn’t make cutting the text from several lines - mJeevas
  • @mJeevas I found a way to do this for several lines, though it only works for chrome with this display code: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; - Constantine Shibaev