Search code examples
cssellipsis

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

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.

Solution

  • 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.