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

Question

I want to show dots on the nth (in my case 2nd) line of a text if it breaks. I saw this and this answers but I didn't manage to get the thing working in my case.

Here's a 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;
}

see http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ — Fabrizio Calderan, Feb 01 '16 at 09:41
You stated that `white-space:nowrap;` so how text would wrap into second line? And besides- it's not possible in css, you'll have to use javascript, does this interests you? There are solutions without js, but you'll have problem inserting dots after text because css doesn't know how long is your text. — Maciej Kwas, Feb 01 '16 at 09:42
http://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines may it will helps you. — Mukul Kant, Feb 01 '16 at 09:42

Jose Rui Santos · Accepted Answer · 2016-02-01T16:19:08.770

Solution 1:

Use the webkit only -webkit-line-clamp property for 2 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>

Solution 2

Use an :after pseudo element, aligned to the bottom right corner. This only works if your text is static and you known beforehand that will overflow the container.

.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) against the content text. If the text height is greater than the parent's height, then a .overflows class is added to the parent.

To test this, delete some text so that it fits all in the parent. You will no longer see the dots.

$(".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>

Is there an alternative to line-clamp for non-webkit browsers? — Yulian, Feb 01 '16 at 09:56
@Yulian Looks like that only webkit browsers support it. The only way I can think of a cross-browser solution for dynamic text is to do it in JS. — Jose Rui Santos, Feb 01 '16 at 10:02

score 0 · Answer 2 · answered Feb 01 '16 at 09:51

0

have a look at this post CSS Tricks, it helped me with this and introduces line clamping with various different ways of achieving the results you looking for.

answered Feb 01 '16 at 09:51

Sphinx

956
7
21

score 0 · Answer 3 · answered Mar 02 '21 at 14:19

Simple way is

{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

but not sure the browser support in the future because the property is not stable yet

.container {
  background-color: tomato;
  color: white;
  padding: 5px 10px 10px;
  width: 300px;
}

.title {
  height: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="container">
  <p class="title">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

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

3 Answers3