1

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.

Siva
  • 1,123
  • 2
  • 14
  • 25
supersaiyan
  • 1,670
  • 5
  • 16
  • 36

2 Answers2

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.

Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • i need this for mobile browser so will it work for mobile ? – supersaiyan May 29 '14 at 07:08
  • @SachinRawal: Which mobile and which browser? As I said, this is a `webkit` only proprietary extension. It works on Safari on iOS. It will also work on Chrome. Apart from that, hard luck. Why don't you try using that fiddle on your mobile. – Abhitalks May 29 '14 at 07:11
0

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/
Ankit Zalani
  • 3,068
  • 5
  • 27
  • 47