add elipsis on the last line of text [duplicate]

Question

This question already has an answer here:

• css ellipsis on second line 18 answers

I want to add elipsis on last line my markeup is:

<h4 class="heading4 js-heading4">Yellow gold Yellow gold Yellow gold</h4>


.heading4 {
    height: 98px;
    position: relative;
    width: 200px;
    overflow: hidden;
    white-space: nowrap
}

I want my output should be like Yellow gold Yellow gold Yellow go...

if text is overflow. problem is if i am adding text-overflow:ellipsis then whole text is coming in one line like : Yellow gold Yellow gold Yell... i want to add ellipsis at the bottom of page.

Answer 1

With standard CSS, no. You can't.

But, there are non-standard browser specific CSS which do this. e.g. webkit based browsers support this (esp. Chrome) using -webkit-line-clamp:

Demo: http://jsfiddle.net/abhitalks/C34Gm/1/

Relevant CSS:

p {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

Note: These "Webkit Extensions" are proprietary webkit-prefixed properties. Do not use on production web sites, at least as of now.

Answer 2

Use this jquery plugin to automatically create eclipses on the end of the text as per your requirement without reinventing the wheel:

http://dotdotdot.frebsite.nl/