CSS Multi Line ellipsis Cross Browser

Question

There is a \"div\" in my webpage that has fixed width and height.

Following css only works with single line text:

overflow: hidden;
text-overflow: ellips         


        

Answer 1

This workaround will require a wrapping element and has a small caveat of covering the very end of your text if it exactly fills your content box, but it works well enough in fluid situations until a better css property (like line-clamp) is widely implemented.

Works best with text-align:justified, but not necessary.

https://codepen.io/freer4/pen/prKLPy

html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;}

.ellipsis{
  overflow:hidden;
  margin-bottom:1em;
  position:relative;
}

.ellipsis:before {
  content: "\02026";  
  position: absolute;
  bottom: 0; 
  right:0;
  width: 3em; 
  height:22px;
  margin-left: -3em;
  padding-right: 5px;
  text-align: right;
  background-size: 100% 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  z-index:2;
}
.ellipsis::after{
  content:"";
  position:relative;
  display:block;
  float:right;
  background:#FFF;
  width:3em;
  height:22px;
  margin-top:-22px;
  z-index:3;
}

/*For testing*/
.ellipsis{
  max-width:500px;
  text-align:justified;
}
.ellipsis-3{
  max-height:66px;
}

.ellipsis-5{
  max-height:110px;
}

  
Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)
  



  
Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.
  




  
The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.