text-overflow ellipsis without "white-space: nowrap"?

Question

I was wondering if there is any clever way, to achieve the css ellipsis effect without the need to apply white-space: nowrap also.

In other words, lets say we have a block element of a certain height and we'd like to let it get filled up with text-content, but the ellipsis should get applied as soon as there is no more room in horizontal plus vertical directions.

Quick example: http://jsfiddle.net/fpv9n/2/

Text should be like it is, but also with an ellipsis at the end. Any way to achieve that using CSS ? I would take JS solutions also into consideration.

Came across [Shave](https://github.com/dollarshaveclub/shave/) which is JS plugin that does multi line text truncation based on a given max-height really well. It uses binary search to find the optimum break point. Definitely worth investigating. — Chirag Ravindra, Aug 29 '17 at 09:13

score 30 · Accepted Answer · answered Jun 10 '13 at 16:51

30

There is no way to do this using pure CSS. It's monstrous and sad. I've often desired this myself when you want the browser to "ellipsify" a multi-line text with possibly overflowing text whenever it spills out of the container.

answered Jun 10 '13 at 16:51

Bendoh

585
4
8

G-Cyrillus · Answer 2 · 2022-01-10T21:08:15.937

Update nowdays CSS line-clamp can be used with the latest browsers.

p:first-of-type {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color:#777
}

<h2>Run that snippet to find out if your browser understand this</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>
  <h3>same text below, not clamped.</h3>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>

end update

You can fake ellipsis with content:'...' and position:absolute; set height within a numbers of line (add eventually vertical-padding)
http://jsfiddle.net/V3ZQH/

span {
    background-color: red;
    width: 100px;
    /*height: 50px;*/
    height:2.4em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap; */
    position:relative;
    padding:0 0.5em;
}
span:after {
    content:'...';
    background:inherit;
    position:absolute;
    bottom:0;
    right:0;
    box-shadow:0 0 5px red
}

no need of span:after if one dislike dots. it's for show purpose since ellipsis is in original CSS. it works without :) — G-Cyrillus, Jun 10 '13 at 17:10
Problem is, the '...' is always shown, even where you have a short text. — Programmer, May 26 '15 at 07:20
This is a cool effect but it shows in the INVERSE of the desired condition. If the text fits, you get ellipses; if the text is too big, you just can't see it. — Methodician, Dec 19 '21 at 17:48
@Methodician , indeed, it was a **2013** answer , lineclamp works just fine nowdays ;) — G-Cyrillus, Jan 10 '22 at 20:59
supported in all current major browsers https://caniuse.com/css-line-clamp (as of 2023-04 with `-webkit-` prefix) and yes, for Firefox, use `-webkit-` too — jave.web, Apr 18 '23 at 15:22

score 1 · Answer 3 · answered Jun 10 '13 at 16:56

1

I know only of ugly work arounds involving content, absolute positionings, helper elements holding the dots and padding. I think it is probably best to have your height to be an exact multitude of your line height, for example by doing so:

height: 2em;
font-size: 1em;
line-height: 1em;

answered Jun 10 '13 at 16:56

The Surrican

29,118
24
122
168

best is to set line-height around 1.2em (defaut setting usually, no matter the font), and as i advise , include your vertical padding inside .Set vertical padding in em for safety. For the dots, you may remove them and let a blur via box shadow not to break sharp in half a letter . :) – G-Cyrillus Jun 10 '13 at 17:08

text-overflow ellipsis without "white-space: nowrap"?

3 Answers3

Linked