using text-overflow:ellipsis; only when reaching 3 lines in a div

javascript ellipsis css
galao picture galao · Apr 26, 2013 · Viewed 8.1k times · Source

this is my css snippet

.test{
    width:150px;
    height:60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

what it does is..

the quick brown fo...

what i want is

the quick brown fox
jumps over the lazy
dog. the quick br...

is there anyway to do this with just CSS? or do i need to use javascript for this. If javascript is needed, anyone can teach me how? thanks!

UPDATE

i tried removing the white-space: nowrap; and added overflow-y: hidden; it gives me the 3 line layout but no ellipsis

.test{
    width:150px;
    height:60px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

Answer

Robin Hwang picture Robin Hwang · Apr 26, 2013

you could use the dotdotdot plugin http://dotdotdot.frebsite.nl/, it works fine for me.

pure css can work in some broswers, but it has many limits. Suppose you want ... at the end of the line3.

.test{
   display: -webkit-box;
   height: 60px; 
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
 }

Related questions

HTML - how can I show tooltip ONLY when ellipsis is activated

I have got a span with dynamic data in my page, with ellipsis style. .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; I'd like to …

Read More
HTML text-overflow ellipsis detection

I have a collection of block elements on a page. They all have the CSS rules white-space, overflow, text-overflow set so that overflowing text is trimmed and an ellipsis is used. However, not all the elements overflow. Is there anyway …

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

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 …

Read More