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: ellipsis;
white-space: nowrap;

How can I apply ellipsis on multiline text on the text inside that div using pure css with cross browser compatibility?

Solution 1

Try this example:

display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

http://codepen.io/martinwolf/pen/qlFdp

or go for dotdotdot.js

Solution 2

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;
}

<div class="ellipsis ellipsis-3">
  <p>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)</p>  
</div>

<div class="ellipsis ellipsis-3">
  <p>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.</p>  
</div>


<div class="ellipsis ellipsis-5">
  <p>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.</p>  
</div>

Solution 3

To bad CSS doesn't support cross-browser multiline clamping, only WebKit seems to be pushing it. Any other hacky solutions don't really seem worth it at the moment because even they have their own issues.

I know how you want pure CSS and probably have your own Javascript alternative options but you could try and use a simple Javascript ellipsis library like Ellipsity on github the source code is very clean and small so if you do need to make any additional changes it should be quite easy.

https://github.com/Xela101/Ellipsity

I'm really wanting a pure CSS solution to this too to speed things up and make everything look more pretty without the need of external dependencies.

Comments

[YakovL]

Welcome to StackOverflow. Have you tested the code you provided? It causes an error (the $(.ellipsis - 2) bit is problematic, may be you need quot marks there). Please also annotate your code since it is large and it's not quite clear if it is necessary for this task. Best regards

[Hemal]

This helped me a lot.