Sam Joch [:samjoch] Reporter
	Description • 11 years ago

We should be able to ellipsis a paragraph and defined the content of the ellipsis.

For now ellipsis only take care of one line text.

	rob
	Comment 1 • 8 years ago

In Webkit/Blink this is available with line-clamp css

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

With an informative article on Chris Coyier's blog

https://css-tricks.com/line-clampin/

	Kohei Yoshino [:kohei]
	Comment 2 • 8 years ago

As a Web app developer, I'd like to see this in Firefox.

	yisibl
	Comment 3 • 8 years ago

I don't think so. This is very Hack.We should implement the max-lines property in bug 1232992.

	Kohei Yoshino [:kohei]
	Comment 4 • 8 years ago

This could eventually be an alias of the max-lines property.

	Sukhvir
	Comment 5 • 7 years ago

This hack works for me:

@-moz-document url-prefix() {
    overflow: hidden;
    position: relative;
    &:before {
      background: #fff;
      bottom: 0;
      position: absolute;
      right: 0;
      float: right;
      content: '\2026';
      margin-left: em(-36);
      width: em(60);
      padding-left: em(5);
    }
    &:after {
      content: '';
      background: #fff;
      position: absolute;
      height: em(50);
      width: $width100;
      z-index: 1;
    }
  }

	Sukhvir
	Comment 6 • 7 years ago

This hack works for me:

@-moz-document url-prefix() {
    overflow: hidden;
    position: relative;
    &:before {
      background: #fff;
      bottom: 0;
      position: absolute;
      right: 0;
      float: right;
      content: '\2026';
      margin-left: em(-36);
      width: em(60);
      padding-left: em(5);
    }
    &:after {
      content: '';
      background: #fff;
      position: absolute;
      height: em(50);
      width: 100%;
      z-index: 1;
    }
  }

	Eric Tsai (no more review request accepted)
	Comment 7 • 7 years ago

Add another example to use -webkit-line-clamp

	Karl Dubost💡 :karlcow
	Comment 8 • 7 years ago

Google search Entertainment - movie section for Gecko with a Chrome UA to get tier1.
https://webcompat.com/issues/7347

	David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)
	Comment 10 • 6 years ago

https://twitter.com/cssrossen/status/969433795614027776 says -webkit-line-clamp is now implemented in a forthcoming Edge preview.

	Benoit Girard (:BenWa)
	Comment 11 • 6 years ago

Facebook currently is flushing style+layout to implement this behavior manually causing a non trivial performance hit. In Chrome we will begin to use CSS line-clamp to remove this performance hit. We will continue to support the alternate code path for Firefox users but it would be great to have a fast solution for Firefox users. This is for shared newsfeed article titles and description. ni? me if you need more information.

I should also note that the correctness is difficult to get right as well. We can't measure and wrap the text until we mount and make the elements visible in the DOM but we have unrelated code that is hiding and unmounting news feed items for performance reason. This code must be made aware of each other while limiting the flushes. With a CSS solution this isn't a problem because it's handled by the browser.

	Florian Rivoal
	Comment 12 • 6 years ago

Fantasai and I wrote a new tentative spec for this. Please don't jump into implementing / shipping it as is just yet, as it is a first draft, but it is meant to solve this problem, so if you're looking into this, feedback is very much welcome.

A good place to start reading about it is this introductory comment:
https://github.com/w3c/csswg-drafts/issues/390#issuecomment-371076389

The spec itself is over there:
https://drafts.csswg.org/css-overflow-3/#line-clamp

That the design does depend on max-lines, so closing this would also close https://bugzilla.mozilla.org/show_bug.cgi?id=1232992

	Mats Palmgren (inactive)
	Comment 13 • 6 years ago

Benoit, thanks for the heads-up.  Can you tell us more about how you will
use this property exactly? (example of typical content)  I'm wondering
if counting top-level lines, not lines in nested blocks, would be sufficient.
Are you using a display:-webkit-box box together with overflow:hidden?

> In Chrome we will begin to use CSS line-clamp

Nit: I wouldn't call the proprietary -webkit-line-clamp property
"CSS line-clamp", because it's very much non-standard.
I have to say I'm a bit surprised Facebook has decided to go down
this "best viewed in Chrome" route...

	Kohei Yoshino [:kohei]
	Comment 14 • 6 years ago

Actually Firefox itself does need this, particularly for the Highlights section on Activity Stream where the page titles and descriptions are chopped for now.

https://wiki.mozilla.org/images/e/ec/ActivityStream.png

In this screenshot, there should be an ellipsis after the word "Maximum" on the middle column.

	Kohei Yoshino [:kohei]
	Comment 15 • 6 years ago

(It's Bug 1417163 which already depends on this bug)

	Benoit Girard (:BenWa)
	Comment 16 • 6 years ago

I want to emphasize that we are not looking specifically for -webkit-line-clamp. From my research it does appear to have some design limitations [1] but it's not an area that I know well so I'll leave it to the standards committee to evaluate it. We're happy to use whatever is implemented that solves the use case.

(In reply to Mats Palmgren (:mats) from comment #13)
> Benoit, thanks for the heads-up.  Can you tell us more about how you will
> use this property exactly? (example of typical content)  I'm wondering
> if counting top-level lines, not lines in nested blocks, would be sufficient.

We're looking to use this for the wrapping of article titles and descriptions. I can attach a screenshot. But taking a look at our source, this property is already used 100s of times on the Facebook site. I can't really say if there's a suitable workaround since this isn't my area of expertise but I'm happy to pass it along to the appropriate product team if we think this property isn't actually needed.

> Are you using a display:-webkit-box box together with overflow:hidden?

The majority of the time, yes.

> I have to say I'm a bit surprised Facebook has decided to go down
> this "best viewed in Chrome" route...

I don't think this is an accurate characterization of the situation.

[1] https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5

	Benoit Girard (:BenWa)
	Comment 18 • 6 years ago

Here's the link to the article to reproduce: http://www.scarymommy.com/st-john-ambulance-makes-infant-cpr-video/

Right now this is still using JS to fix up so it's not a good practical example itself but at least can serve as an illustration.

	fantasai
	Comment 19 • 6 years ago

In the example you're showing, the ellipsis is not placed near the end of the line: more words would fit on that last line, in addition to the ellipsis. How are you deciding where to put the ellipsis? Also if you want the ellipsis mid-word, that conflicts with the desire in https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5 to not put an ellipsis mid-word... :/

	Benoit Girard (:BenWa)
	Comment 20 • 6 years ago

Yes it's a pretty terrible example and not the desired outcome. I think we would prefer to fill the line and not put the ellipsis mid-word if possible. I've asked for a better example. I'll post next week with one.

	Benoit Girard (:BenWa)
	Comment 21 • 6 years ago

Here's a codepen with our use case https://codepen.io/anon/pen/KoyPzM using -webkit-line-clamp that simulates our article title use case, I don't believe it's live on the site but rather we're still using JavaScript everywhere for the time being. I did confirm that it would be best to avoid ellipsis mid-word unlike Chrome's implementation.

	fantasai
	Comment 22 • 6 years ago

That seems compatible with the proposed spec, so good to hear. :)

	Daniel Holbert [:dholbert]
	Comment 23 • 6 years ago

(Note: If & when we implement the unprefixed "line-clamp" proposed spec text, it's unclear whether it'd be wise to also ship unprefixed "-webkit-line-clamp" as an alias for it.

As I understand it, Safari & Chrome's -webkit-line-clamp feature is strictly limited to things with "display: -webkit-box", and has no effect on anything else. Whereas, the modern version has effects on *all* content.  So: if we were to implement the modern spec and naively ship a webkit-prefixed alias of the modern thing, then it's possible we'd break content, by virtue of honoring styles on elements with "-webkit-line-clamp:3;display:block" that are inactive in Chrome/Safari.

We could try to implement a "smart" not-quite-alias that checks the display value at layout-time before taking effect, or something like that, but that sounds pretty painful... so in an ideal world, I'd hope we could implement & ship the modern thing without any alias, and then encourage sites that care about this to use the modern thing.

	Mats Palmgren (inactive)
	Comment 24 • 6 years ago

Indeed, and their implementation of -webkit-line-clamp for
display:-webkit-box doesn't match what the spec says either.

	Karl Dubost💡 :karlcow
	Comment 25 • 6 years ago

I could re-check to see how -webkit-line-clamp is used on most sites (in the seeAlso) and see if we have a really defined pattern for the layout or if there is a variety of cases.

	Mike Taylor [:miketaylr]
	Comment 26 • 6 years ago

(In reply to Karl Dubost :karlcow from comment #25)
> I could re-check to see how -webkit-line-clamp is used on most sites (in the
> seeAlso) and see if we have a really defined pattern for the layout or if
> there is a variety of cases.

That would be good, thanks Karl.

	Bobby Holley (:bholley)
	Comment 27 • 6 years ago

This was marked as Q3 work in layout triage. I think we should probably aim to get it done for Firefox 64 given the impact on facebook. I think it's on the list of things to discuss at CSSWG.

	Cameron McCormack (:heycam) Assignee
	Comment 28 • 6 years ago

I'm going to pick this one up (in a couple of weeks).

After some discussion this week I don't think we want to implement the -webkit-line-clamp alias itself, as there is too much risk of incompatibility with Blink and WebKit's implementation oddities.  So I think we should implement the standards version (the max-lines and block-overflow longhands and the line-clamp shorthand) and then get feedback from Benoit.

	Cameron McCormack (:heycam) Assignee
	Comment 29 • 6 years ago

Once we have an implementation of the standards version we can look at whether we really need to implement the oddities of -webkit-line-clamp.

The most important oddity is probably that it only applies with display:-webkit-box;-webkit-box-orient:vertical; as dholbert mentioned earlier.  Secondary oddities are that the overflowed lines still get rendered, but that's less likely to be a compat issue since authors need to put a max-height / overflow:hidden on the element to hide them away anyway.

	Benoit Girard (:BenWa)
	Comment 30 • 6 years ago

Happy to provide feedback and make sure that Firefox users on Facebook are getting the standard CSS property and no longer have to run the slow JS fallback. \o/

	Karl Dubost💡 :karlcow
	Comment 31 • 6 years ago

# Documenting -webkit-line-clamp

How:
====

* limiting the number of lines shown 
* limiting the number of lines shown AND add an ellipsis

Contexts:
=========

* Most of them are used in search lists (shop, search engines, appointments list) where items need to be compact and boxes regular.
* Most of them are -webkit-line-clamp for 2 or 3 lines. Majority: 2, Marginally: 1.
* High profile sites is using it 
* frequent in mobile layouts where the real estate constraints are more important.


Dependencies (on WebKit and Blink):
===================================
This creates an ellipsis at the end of the 2nd line.
.blah { display: -webkit-box;
       -webkit-box-orient: vertical;
       overflow: hidden;
       -webkit-line-clamp: 2;}

This just hides the line without ellipsis after the 2nd line.
.blah { display: flex;
       flex-direction: vertical;
       overflow: hidden;
       -webkit-line-clamp: 2;}

adding text-overflow: ellipsis doesn't change anything.


Identified issues (on Gecko):
=============================

* text overlapping the next box making it unreadable.
* box being bigger for containing the text pushes the layout and breaks it (such as 2 columns of square boxes not the same height anymore, or boxes not cascading properly giving a stair effects)
* in 2 lines case, the 3rd line being cut partially from the bottom (sometimes being unreadable)
* height of box creates an unwanted scrollbar



List of sites:
==============

## Linkedin (fixed by the site)
https://webcompat.com/issues/1860
text overflowing on the next box, making it unreadable.
https://codepen.io/webcompat/pen/ERdPbV

## m.mafengwo.cn
https://webcompat.com/issues/4772
text overflowing on the next box, making it unreadable.

```css
.guideflow .bd dd .summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
```


## disney.com
https://webcompat.com/issues/5605
text making a higher box and then destroying the layout of square boxes side by side.

```css
h2.longText {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
```

## fr.finance.yahoo.com
https://webcompat.com/issues/6403
Pushing the next box of layout below and then destroying the layout.

```css
._3_iaU a, ._3_iaU p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;}
```

## www.ebay.fr
https://webcompat.com/issues/6479
text overlapping the next box.

```css
.ebayui-ellipsis-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
```

## www.dailymotion.com
https://webcompat.com/issues/6730

text too long gets some characters like y, g, p cut in the bottom.



```css
.collection-item-title {
    font-size: 15px;
    line-height: 17px;
    margin: 0;
    font-weight: 600;
    color: #404040;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}
```


## google.com
https://webcompat.com/issues/7347

pushing the text below and making it disappear.
```css
._Wqo {
    -webkit-box-orient: vertical;
    color: rgba(0,0,0,.87);
    display: -webkit-box;
    font-size: 14px;
    -webkit-line-clamp: 2;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
}
```


## www.ndtv.com
https://webcompat.com/issues/7468

text cut in the middle because the height is fixed.

```css
.h__truncate, .h__txt-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
}

.h__truncate {
    display: -webkit-box;
    position: relative;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.media-list__title {
    height: 32px;
    line-height: 1.2;
    font-size: 1.4rem;
}

.media-list--news .media-list__title {
    max-height: 50px;
    -webkit-line-clamp: 3;
}
```

## www.rediff.com
https://webcompat.com/issues/7482

text overlapping the next box.

```css
.ftitle span {
    text-decoration: none;
    color: #212121;
    text-shadow: 0 1px 0 #F3F3F3;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 1.2;
    position: relative;
}
```

## www.baidu.com
https://webcompat.com/issues/8290

text overlapping the next box.

## www.justdial.com
https://webcompat.com/issues/7647

text overlapping the next box.

## istyle.ltn.com.tw
https://webcompat.com/issues/9404

Characters cut halfway.

```css
lbox h5 div {
    padding: 3px 8px 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.7rem;
    font-size: 1.2rem;

}

```

## m.youtube.com
https://webcompat.com/issues/13805

pushing the layout below and hidding part of the text.
```css
.gpb.qkb .np {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
```

## www.zdfans.com
https://webcompat.com/issues/15477

boxes being too high they don't float correctly and cascade. Layout destroyed.

```css
#content .entry-inner h2.post-title {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    padding-right: 0%;
    line-height: 115%;
    font-size: 110%;
    margin: 3px 0 0;
    height: 2.3em;
}
```

## mail.google.com
https://webcompat.com/issues/16734

Creating a scrollbar into a box because the layout is too high.

```css
.xQ6AJ {
    font-family: 'Google Sans',Arial,sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .01rem;
    line-height: 1.375rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: 1.25rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
```

	Mats Palmgren (inactive)
	Comment 32 • 6 years ago

This testcase tests "-webkit-line-clamp: 3".  In Chrome 68, an ellipses is inserted after "4" in the first two boxes and there's no ellipses in the third box.

	Kohei Yoshino [:kohei]
	Comment 33 • 6 years ago

In Bug 1479563, I’m adding `-webkit-line-clamp` to *this* Bugzilla’s Requests dropdown list. A screenshot can be found in my PR: https://github.com/mozilla-bteam/bmo/pull/682

	Karl Dubost💡 :karlcow
	Comment 34 • 6 years ago

We got feedback that Twitter needs this too.

	Benoit Chassignol
	Comment 35 • 5 years ago

Is there is a pure CSS solution supported by FF, actually or in preparation, instead of the fallback in JS ?

	Cameron McCormack (:heycam) Assignee
	Comment 46 • 5 years ago • Edited

Comment on attachment 9044087 [details] [diff] [review]
WIP (v0.2)

May as well get a proper review of an updated patch, now with tests.

The one other question I have is whether it makes sense to skip independent formatting contexts.  I think it kind of does (it definitely does if the formatting context is something non-block, like a flex or grid container), but it would also mean skipping over an `overflow: hidden` child of a flex item in a -webkit-line-clamp controlled flex container, which is not something that Blink does.

	Pulsebot
	Comment 55 • 5 years ago

Pushed by cmccormack@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c2250a23fd66
Implement -webkit-line-clamp. r=mats,emilio,dholbert

	Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)
	Comment 60 • 5 years ago

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/16885 for changes under testing/web-platform/tests

	Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)
	Comment 61 • 5 years ago

Upstream PR merged