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?

Answer 1

You could solve it using some after pseudo classes. As text-overflow: ellipsis doesn't render the same cross browser we are adding ellipsis using the content attribute that you can provide to the :after class. When we are setting white-space: nowrap to the p we need to add the div:after "hack" to ensure that the text is clipped where the padding sets in.

HTML:

<div>
    <p>This is a text that clips to ellipsis because it is long</p>
    <p>This is a text that clips to ellipsis because it is long</p>
</div>

CSS

div {
width: 200px;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}

//Solves the overflow issue of the white-space: nowrap
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: #fff;
z-index: 1;
}

p {
white-space: nowrap;
display: inline-block;
}

p:after {
content: '...';
position: absolute;
right: 5px;
z-index: 2;
}

JSFiddle

Edit

I can see that I might have misread your question a bit. My code will fix Cross-browser ellipsis rendering but not for multi-line text. Check out this post for more answers on your specific topic: Limit text length to n lines using CSS: Stack Overflow

Answer 2

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.

Answer 3

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

Answer 4

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>

Answer 5

var explorer = detectIE();

function detectIE() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }
  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }
  var edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }
  // other browser
  return false;
}
var firefox = navigator.userAgent.indexOf('Firefox') > -1;

if ((explorer) || (firefox)) {

  var fontSize = $(".ellipsis-2").css('font-size');
  var fontSize = parseInt(fontSize, 10);
  var lineHeight = fontSize + 4;
  var height = lineHeight * 2;
  $(".ellipsis-2").css("line-height", lineHeight + "px");
  $(".ellipsis-2").css("height", height);
  $(".ellipsis-2").css({
    "overflow": "hidden",
    "position": "relative",
    "word-break": "break-all"
  });

  var divheight = $(".ellipsis-2").height();
  var lineheight = $(".ellipsis-2").css('line-height').replace("px", "");
  var countline = Math.round(divheight / parseInt(lineheight));
  // if you want to show 2 line 
  if (countline > 2) {
    $(".ellipsis-2").addClass("dotted");
  };

}

.ellipsis-2 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  position: relative;
}

.dotted:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="ellipsis-2">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>