CSS text-overflow - apply ellipsis if text extends (n)th line

Question

I'm using the following code to to prevent text from overflowing to a new line:

.info-box{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; 
  height: 3em;
  width: 300px;
  font-size: 1em;
  line-height: 1em;
}

This works, as expected, but there is room for three lines in this box. How can I command browsers to apply the elipsis if the text extends beyond the third line? Or does text-overflow only work over one?

I probs won't bother if I need JS for this.

Garboard

Note that text-overflow doesn't work in Firefox. – Animal

@rfusak - it is coming in Firefox 7, which should be released fairly soon now (see #4927757 for more info) – Oram

Answer 1

You can fake it with CSS like this.

Add a <span>...</span> at the beginning of the div.

<div class="info-box"><span>...</span>Lorem ipsum dolar etc.</div>

In your CSS

1. get rid of the nowrap and text-overflow

2. add some padding-right

3. position the span down by the bottom right.

CSS

.info-box{
    overflow:hidden;  
    height: 3em;
    width: 300px;
    font-size: 1em;
    line-height: 1em;
    padding-right:20px;
}

.info-box span{
    position:relative;
    top:31px;
    left:297px;
    display:inline-block;
}

Working Example: http://jsfiddle.net/jasongennaro/UeCsk/

fyi... there will be a small gap at the top left, where the ellipsis is supposed to be (because we are using position:relative;.

fyi 2... this should work with however many lines you want (you mentioned three in the question) provided that you adjust the top and left.

Affectation

thanks, this is a very nice technique, thanks, I'm trying it out – Garboard

this is not a solution when you have a chance to not fill completely the text lines. – Bolide

Answer 2

I know this is an old question, but I found this fix and it works fine for me.

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

    @import "compass/css3";

/* Martin Wolf CodePen Standard */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}

/* END Martin Wolf CodePen Standard */


$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

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

Selfknowledge