CSS word ellipsis ('...') after one or two lines

Question

I'm trying to create a word-wrap in JavaScript using CSS, and the condition is:

If DIV contains one very long word, such as "asdasfljashglajksgkjasghklajsghl", I want to display:

     |asdasfljashglajk...|

If DIV contains a long sentence, such as "if i had a dime for everytime i was told i can't", I want to display:

     |if i had a dime for|
     |everytime i was... |

I work with HTML, CSS, JavaScript. I can't use jQuery.

Please let me know if it's possible.

Bayly

Can you define what "long word" and "long sentence" mean to you exactly? (A number of characters, a certain width...) – Monogenetic

possible duplicate of Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div? – Pacer

Answer 1

For this you can use text-overflow: ellipsis; property. Write like this

white-space: nowrap;
text-overflow: ellipsis;

Feuar

This will work for the first case (ellipsis on long word), but not the second (ellipsis on second line) – Leeke

The second case is not simple with css only, see #3405008 – Archaize

yea for multiple lines,javascript is the solution – Feuar

thanks, i managed to create the ellipsis for 2 lines, and i managed to create for one line. is there a way, with JS or html css, to get them both? i mean, if there's one long word(the length can be set) then "..." appears in the same row, and if there are many words, the "..." appears in the second line? thanks again – Bayly

may also need overflow: hidden in some cases. – Bulletin

Why is this selected solution when it does not solve the problem of having two+ lines of text? – Grani

Answer 2

Found this:

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

Looks like -webkit-line-clamp works in some browsers.

Crossstitch

awesome , big like, helped me a lot – Woollyheaded

Answer 3

I know I'm a bit late with the anwser but I just wrote a pice of code that accomplices that:

    if ($('your selector').height() > 50) {
        var words = $('your selector').html().split(/\s+/);
        words.push('...');

        do {
            words.splice(-2, 1);
            $('your selector').html( words.join(' ') );
        } while($('your selector').height() > 50);
    }

and of course you should save the jQuery selector in a variable so you don't query the DOM every time.

Boorman

Didn't OP say I can't use jQuery? – Aeonian

Answer 4

Sadly, with CSS alone I don't think you can.

http://jsfiddle.net/TVVHs/

text-overflow: ellipsis; only works with white-space: nowrap; which prevents multiple lines.

There probably is a crazy javascript solution that keeps chopping off words until the element height is acceptable, but that will be slow and pretty damn hacky nasty.

Firstling

As for the slowness of the JavaScript solution, it could be made faster by doing a binary search for the maximum number of words that fits in the desired height, instead of a linear search. For example, start with half the words, and then if that's too tall, try a quarter of the words, and if that all fits, try 3/8 of the words, etc. – Destructive

Answer 5

when you'll be allowed to use jQuery you could see the dotdotdot plugin at this link.. very simple to use and it works great!

For the moment i can suggest you to have a look at this fiddle! whould work the text-overflow: ellipsis

Frasco

sry.. i've lately noticed that @Archaize already linked the discussion i took the fiddle from! – Frasco

Answer 6

After fiddling around with the CSS to come up with a "next-best" CSS ONLY solution, I came up with this:

p.excerpt { position: relative; height: 63px; line-height: 21px; overflow-y: hidden; }
p.excerpt:after { content: '...'; position: absolute; right: 0; bottom: 0; }

This would always assume you have at least 3 lines of text, and there are a couple of issues with it. If the last word to wrap onto line 4 is very long, there would be an unusually large blank space between the last word and the ellipsis. Similarly, it could overlap the last word if it was something very, very small, like "a".

You could add another container and have the ellipsis outside of the p, and with a bit of comment tweaking I'm sure someone will fiddle up something better.

Terzas

This really helped me a lot!! I just added an additional css class for empty cells, so that they would not show the "..." when there is no more text to show p.excerpt:empty { height: 0; line-height: 0; } – Kneeland

Answer 7

If you can guarantee the content will run over, here is the solution I came up. It works for my site and I wanted to keep it simple.

html:

<p class="snippet">
   [content]
</p>

css:

.snippet {
    position: relative;
    height: 40px; // for 2 lines
    font-size: 14px; // standard site text-size
    line-height: 1.42857; // standard site line-height
    overflow: hidden;
    margin-bottom: 0;
}
.news-insights .snippet:after {
    content: "\02026";
    position: absolute;
    top: 19px;
    right: 0;
    padding-left: 5px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white); // use vendor prefixes for production code
}

You can then play around with the padding and background gradient to get a more stylish presentation.

Cheng

Answer 8

Hope this answers your question

  @mixin multilineEllipsis(
  $lines-to-show: 2,
  $width: 100%,
  $font-size: $fontSize-base,
  $line-height: 1.6) {

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

http://codepen.io/martinwolf/pen/qlFdp http://caniuse.com/#search=-webkit-line-clamp

Roswald

Why is this answer not popular? It works as long the text is longer than the width set. you can create a generic width and height and will get the desired results. – Maiolica

Answer 9

Displaying the ellipsis needs to be handled differently when the width of container is fixed and percentage.

• When width of container is fixed

    .nooverflow{
        display: inline-block;
        overflow: hidden;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

• When width of container is in percentage or auto, in this scenario define another tag in that container to render the text and specify width as 0 and min-width as 100%, that way it will take the width of container and show the ellipsis. Below is the LESS class to be used:

    .nooverflow{
        display: inline-block;
        overflow: hidden!important;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap!important;
        width: 0;
        min-width: 100%;
    }

Artisan