Show dots on the nth line of text if it breaks with CSS

Question

I want to show dots on the nth (in my case 2nd) line of text if it breaks. I saw this and this , but I was not able to get this work to work in my case.

Here's the fiddle .

.overme { width: 300px; height: 60px; line-height: 30px; overflow:hidden; font-size: 30px; color: red; background: #333; /*The problematic part is below*/ white-space:nowrap; text-overflow: ellipsis; } 

Answer 1

Solution 1:

Use the webkit property only -webkit-line-clamp for two lines.

 .overme { width: 300px; height: 60px; line-height: 30px; overflow:hidden; font-size: 30px; color: red; background: #333; /*The problematic part is below*/ white-space:nowrap; text-overflow: ellipsis; } .overme { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 

 <div class="overme"> how much wood can a woodchuck chuck if a woodchuck could chuck wood? </div> 

---

Decision 2

Use the :after pseudo-element aligned in the lower right corner. This only works if your text is static and you know in advance that the container will overflow.

 .overme { width: 300px; height: 60px; line-height: 30px; overflow:hidden; font-size: 30px; color: red; background: #333; position: relative; } .overme:after { display: inline-block; position: absolute; right: 0; bottom: 0; content: '...'; } 

 <div class="overme"> how much wood can a woodchuck chuck if a woodchuck could chuck wood? </div> 

---

Solution 3 - Cross Browser

This JS solution compares the height of the parent container (div) with the content text. If the height of the text is greater than the parent height, the .overflows class is added to the parent element.

To check this, delete some text so that it matches all parents. You will no longer see the point.

 $(".overme").each(function () { var $elem = $(this); $elem.addClass($elem[0].scrollHeight > $elem.height() ? 'overflows' : null); }); 

 .overme { width: 300px; height: 60px; line-height: 30px; overflow:hidden; font-size: 30px; color: red; background: #333; position: relative; } .overme.overflows:after { display: inline-block; background: #333; position: absolute; right: 2px; bottom: 0; content: '...'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="overme"> how much wood can a woodchuck chuck if a woodchuck could chuck wood? </div> 

Answer 2

look at this CSS Tricks post, it helped me with this and introduced a linear clip with various ways to achieve the results you are looking for.