1

I'm trying to figure out a way to show ellipses after text, but only when it reaches bounds of height not width, I know this can be done using text-overflow: ellipsis; and white-space: nowrap; for width restricted elements, but can't figure it out for height.

Here is my example: https://jsfiddle.net/c7bmyc4e/1/

Example code:

<p id="p-one">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>

<p id="p-two">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>

p{
        margin: 20px;
        background: red;
        height: 100px;
        width: 300px;
}

#p-two {
        margin: 100px 20px 20px 20px;
        padding-bottom: 20px;
        height: 100px;
        overflow-y: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
Ilja
  • 44,142
  • 92
  • 275
  • 498
  • Have a look at this question -> http://stackoverflow.com/questions/11802361/add-three-dots-in-a-multiline-span – Nick May 01 '15 at 09:26
  • See this article on Mobify: [multi-line ellipsis in pure CSS](http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/). Certainly qualifies in the "*oh wow!*" category of brilliant use of CSS :) – FelipeAls May 01 '15 at 09:49
  • It is because it doesn't support multiline text. – ketan May 01 '15 at 09:58
  • @FelipeAls Sweet, would you like to post that as an answer? – Ilja May 01 '15 at 10:13
  • @Ilja, you may post the code which worked for you, as an answer by checking "community wiki" before submitting and then accept it, so that will help other users. – Keval May 12 '15 at 07:55

1 Answers1

-1

For height ellipsis i have one CSS solution.

Suppose I have one h2 element and I will apply css on that h2



 <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
 sed diam nonumy eirmod tempor invidunt ut labore et.</h2>

And this is css for height ellipsis



h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 26*1.4*3; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size:26px;
  line-height: 1.4;
  -webkit-line-clamp:3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Note: What is -WebKit

WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome.

List of rendering engine for Web browser

  • IE
    • Engine: [Trident][2]
    • CSS-prefix: -msie
  • Firefox
    • Engine: [Gecko][3]
    • CSS-prefix: -moz
  • Opera
    • Engine: [Presto][4]
    • CSS-prefix: -o
  • Safari & Chrome
    • Engine: [WebKit][5]
    • CSS-prefix: -webkit

So for Safari/Chrome use -webkit in css and for other browser use css-prefix as mentioned above

Example of above explanation : https://jsfiddle.net/c7bmyc4e/4/

Keval Bhatt
  • 6,224
  • 2
  • 24
  • 40