402

CSS text-overflow: ellipsis on second line, is this possible? I can't find it on the net.

example:

what I want is like this:

I hope someone could help me. I need 
an ellipsis on the second line of...

but what's happening is this:

I hope someone could help me. I ... 
4
  • 3
    AFAIK the ellipsis will appear and cut off the text at the end of the element's width. It won't flow over to the next line. The best solution here would be to implement some server- or client-side script which automatically trims the text to a certain amount of characters and then appends the ellipsis. My guess is a client-side script would be better, which would enable you to still have all the original text available if you need it. Mar 11, 2011 at 6:35
  • 1
    here is a similar question: stackoverflow.com/questions/3922739/…
    – Evgeny
    Mar 22, 2013 at 0:30
  • tl;dr: it is possible only in webkit
    – Evgeny
    Mar 22, 2013 at 0:32
  • The closest I came to achieving this was add an 'after' pseudo-element for the ellipsis, and position it inline, directly after the element containing the text. But the ellipsis vanishes if the element text is too long, so you'd have to trim the text somehow, in order to make this reliable.
    – Jonathan
    Mar 27, 2014 at 5:04

21 Answers 21

388

This should work in webkit browsers:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

browser support

div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

* { font-family: verdana; }
<div>
   The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display  property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.
</div>

16
  • 1
    Note that, as of this comment, -webkit-line-clamp does not respect visibility: hidden. bugs.webkit.org/show_bug.cgi?id=45399
    – Kevin
    Oct 29, 2014 at 13:08
  • 6
    Hey - seems nice but doesn't work for me. It simply puts '...' at given line-clamp but doesnt cut rest of text (even with white-space attr)
    – lemoid
    Jul 29, 2015 at 13:06
  • 10
    You may need to add overflow: hidden for this to work.
    – Robert
    Sep 24, 2015 at 21:27
  • 1
    This will not work in Firefox, webkit not supported in gecko engine
    – ZetaPR
    Sep 15, 2016 at 9:35
  • 5
    This does in fact work in Firefox now. It's not even necessary to specify text-overflow: ellipsis; when using this.
    – emmalyx
    Oct 16, 2020 at 23:08
163

A requirement for text-overflow: ellipsis; to work is a one-line version of white-space (pre, nowrap etc). Which means the text will never reach the second line.

Ergo. Not possible in pure CSS.

My source when I was looking for the exact same thing just now: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDIT If the good CSS gods will implement http://www.w3.org/TR/css-overflow-3/#max-lines we can haz this in pure CSS using fragments (new) and max-lines (new). Also some more info on http://css-tricks.com/line-clampin/

EDIT 2 WebKit/Blink has line-clamp: -webkit-line-clamp: 2 will put ellipsis on 2nd line.

3
117

Just use line-clamp for the browsers that support it(most modern browsers) and fall back to 1 line for older.

  .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

browser support

4
  • 6
    white-space: initial; saved me
    – James
    Jun 13, 2019 at 20:19
  • 3
    best quality of those answers. Thank you Dec 30, 2020 at 10:51
  • 3
    From my point of view, I see this solution as optimal. Nowadays the websites are using a lot of JS, compared with 10 years ago, and we have to cater for performance. I prefer to use CSS to style, even if there is a small difference between browsers. Feb 16, 2021 at 8:38
  • Addition: if your content is not text, make sure it is set to display: inline-block
    – Centerwork
    Feb 1, 2023 at 13:39
50

I found that Skeep's answer was not enough and needed an overflow style too:

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
1
  • Just to mention that other solutions included -webkit-line-clamp: 3; while the question was for 2 lines, so this one is more correct. Nov 3, 2021 at 14:34
36

As others have already answered, a pure CSS solution does not exists. There is a jQuery plugin that is very easy to use, it is called dotdotdot. It uses the container's width and height to calculate if it needs to truncate and add ellipsis.

$("#multilinedElement").dotdotdot();

Here is a jsFiddle.

5
  • This plugin also provides lots of other utilities like adding "read more" links, it can also parse URIs and HTML markup. Good find! Jul 31, 2013 at 8:39
  • 2
    I tried out jQuery dotdotdot 1.7.3 for an ecommerce store, to limit the product names on a grid category page to two lines. After thorough testing, we decided not to go with this plugin because sometimes, after a shift-refresh, the category page layout would be broken. YMMV. In the end we went with a very simple vanilla JS solution: if the product name element's clientHeight is less than its scrollHeight, truncate the text at a preset boundary and append "...". Sometimes a few product names can be a bit too short because of the preset boundary, but it's super stable.
    – thdoan
    Jun 2, 2015 at 10:40
  • 1
    Easty to implement and works beautifully. Thank you!
    – Rachel S
    Jul 13, 2016 at 15:27
  • Although it works good, unfortunately it suffers from performance issues. If your project requires multiple ellipsis usages, consider another option. In addition here's a quote from the repository: "Because its performance can not be improved, this plugin is no longer actively maintained.". Dec 20, 2016 at 9:21
  • 1
    also, it wouldn't work if the text changes dynamically after loading :(
    – Dejell
    Mar 23, 2017 at 10:57
25

I used these css properties for line ellipsis-

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;

here -webkit-line-clamp: 3; is the number of line(3 lines) after which ... shows.

0
23

If anyone is trying to get line-clamp to work in flexbox, it's slightly trickier - especially once you are torture testing with really long words. The only real differences in this code snippet are min-width: 0; in the flex item containing truncated text, and word-wrap: break-word;. A hat-tip to https://css-tricks.com/flexbox-truncated-text/ for the insight. Disclaimer: at the time this answer was written, browser support was poor outside of Chrome. However, things may have improved since then.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}
<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (codepen version)

1
  • 1
    thanks ! word-wrap: break-word is key to me Nov 30, 2022 at 6:38
21

if someone is using SASS/SCSS and stumbles upon this question - maybe this mixin could be of help:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

this only adds the ellipsis in webkit browsers. rest just cuts it off.

2
  • 2
    Using LESS, I had to change /* autoprefixer: off */ to /*! autoprefixer: off */ otherwise -webkit-box-orient: vertical; was getting removed after compilation which means the ellipsis never showed
    – Nathan
    Jun 12, 2018 at 13:14
  • Using less and autoprefixer as a gulp task I had to set remove:false in the options list.. thank you @nathan
    – Esger
    Nov 3, 2021 at 17:16
11

What a shame that you can't get it to work over two lines! Would be awesome if the element was display block and had a height set to 2em or something, and when the text overflowed it would show an ellipsis!

For a single liner you can use:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

For multiple lines maybe you could use a Polyfill such as jQuery autoellipsis which is on github http://pvdspek.github.com/jquery.autoellipsis/

1
  • That plugin is way too heavy for what it does. It's 5 years old. Rather use dotdotdot mentioned in another post.
    – adi518
    Sep 7, 2016 at 16:00
11

I'm not a JS pro, but I figured out a couple ways you could do this.

The HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

Then with jQuery you truncate it down to a specific character count but leave the last word like this:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

The result looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et…

Or, you can simply truncate it down to a specific character count like this:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

The result looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
elementum consequat tortor et euismod…

Hope that helps a bit.

Here is the jsFiddle.

9

here is good example in pure css.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}
<div class="container">


<div class="block-with-text">
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
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

1
  • Pretty good solution , just it truncates texts even if the second line is too short to be truncated, but still , thumbs up
    – Amin
    Jun 20, 2018 at 23:05
9

Sass helper mixin:

For those who are using a preprocessor like Sass, you could have a mixin with an optional parameter called lines which defaults to 1, this makes it very convenient to apply text truncation on an element, and change the number of lines when you need:

@mixin text-ellipsis($lines: 1) {
    text-overflow: ellipsis;
    overflow: hidden;
    @if ($lines > 1) {
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    } @else {
        white-space: nowrap;
    }
}

Usage:

.some-title {
    @include text-ellipsis($lines: 2);
}
6

I have used the jQuery-condense-plugin before, which looks like it can do what you want. If not, there are different plugins that might suit your needs.

Edit: Made you a demo - note that I linked the jquery.condense.js on the demo which does the magic, so full credit to the author of that plugin :)

6

Pure css way of trim multiline text with ellipsis

Adjust text container's hight, control line to break by -webkit-line-clamp: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
5

All the answers here are wrong, they missing important piece, the height

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>
4

It is a non-standard CSS, which is not covered in current version of CSS (Firefox does not support it). Try to use JavaScript instead.

2

I've met this issue before, and there is no pure css solution

That's why i have developped a small library to deal with this issue (among others). The library provides objects to modelize and perform letter-level text rendering. You can for example emulate a text-overflow: ellipsis with an arbitrary limit (not necessary one line)

Read more at http://www.samuelrossille.com/home/jstext.html for screenshot, tutorial, and dowload link.

0
0

a pure css method base on -webkit-line-clamp, which works on webkit:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}
<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

0

No real easy way to do this. Use the Clamp.js library.

$clamp(myHeader, {clamp: 3});
-2

Late Reply but a html line-break works as well, so you can do a html + css only solution. So it's bad practice to usually use the br element, but if you break your comment with br the text-overflow ellipsis will start on the next line of the html text.

1
  • 1
    Please try including an example code with your answer Nov 10, 2020 at 9:27
-7

I found a solution however you need to know a rough character length that will fit in to your text area, then join a ... to the preceeding space.

The way I did this is to:

  1. assume a rough character length (in this case 200) and pass to a function along with your text
  2. split the spaces so you have one long string
  3. use jQuery to get slice the first " " space after your character length
  4. join the remaining ...

code :

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

here is a fiddle - http://jsfiddle.net/GYsW6/1/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.