1417163 - Show ellipsis at end of long title and description texts with line-clamp

Status: VERIFIED FIXED

(Firefox :: New Tab Page, enhancement, P1)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing card descriptions awkwardly ending mid-sentence

See screenshot. Right now, the "Recommended by Pocket" cards each have a paragraph of text, but unfortunately the text doesn't all fit, so it gets cut off awkwardly in the middle of the sentence.

e.g.
----------
[image]
VOX
Marvel has a villain problem.
Thor: ragnarok is a textbook
example.
Like a halloween haul of
----------


If I inspect the card in devtools, I can see that there's more text, and we're presumably trying to make it responsive and show as much or as little text as will fit, which is great. But really we should be ellipsizing the text that doesn't fit. (And for that to work, the element with the text inside of it needs to have "overflow:hidden" and "text-overflow:ellipsis", and it needs to be sized to be as tall as the available space rather than sized to the content as it is right now.)

Comment 1

[Daniel Holbert [:dholbert]]

Actually, this affects "Highlight" cards as well -- not just the Pocket ones.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot showing that "highlight" cards have the same problem

Comment 3

[Ed Lee :Mardak]

Just setting text-overflow: ellipsis; doesn't quite work as the text is wrapped to multiple lines and happens to be cut off on an earlier line. Sounds like this would need bug 866102.

Comment 6

[Tim Spurway [:tspurway]]

We have a new card design that makes this less important/likely

Comment 7

[Daniel Holbert [:dholbert]]

This is still an issue (I've run into this a few times with cards recently, with article titles arbitrarily/awkwardly truncated midsentence).

Good news, though -- we'll soon have a CSS feature that can better address this -- "-webkit-line-clamp", being implemented in bug 866102, the bug that Mardak noted in comment 3 (prefixed for compat reasons). It's undergoing review and will hopefully be available in Nightly soon.

Tim or Mardak, could this bug be reopened & reprioritized? I'm hoping that bug 866102's imminent landing means that we could take action on this now.

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: screenshot of an "excerpt" in a real tile that has this problem, and also a title that has this problem (found on getpocket.com and inserted manually via devtools)

I still see a version of this, right now, on my new-tab-page in an article "excerpt" section. See the left tile in my attached screenshot - that's an actual tile on my new tab page, which awkwardly stops midsentence. This would arguably feel nicer / less-broken if there were an ellipsis.

I don't see it in titles super-often these days (perhaps because we curate our suggestion-titles to be short so as not to trigger this?), but I have seen it a few times recently, and I was able to find one title on https://getpocket.com/explore/trending?src=fx_new_tab&cdn=0 that is long enough to trigger awkward truncation if I manually insert it into one of my New Tab "Recommended" Tiles (emulating what would happen if I had received this tile as a suggestion). The long title in question is:

The great Equifax mystery: 17 months later, the stolen data has never been found, and experts are starting to suspect a spy scheme

My attached screenshot has this text inserted into the second tile, to emulate the experience that I'd get if I were to receive this article-suggestion dynamically. As you can see in the screenshot, it gets truncated/clipped after the word "and" (about 2/3 of the way through). It'd look less broken if there were an ellipsis there, and -webkit-line-clamp could help us with that once it's landed.

Comment 9

[Ed Lee :Mardak]

Attachment: discovery stream with -webkit-line-clamp

diff --git a/content-src/styles/_mixins.scss b/content-src/styles/_mixins.scss
--- a/content-src/styles/_mixins.scss
+++ b/content-src/styles/_mixins.scss
@@ -11,7 +11,8 @@
 // Note: lineHeight and fontSize should be unitless but can be derived from pixel values
 @mixin limit-visibile-lines($line-count, $line-height, $font-size) {
+  display: -webkit-box;
   font-size: $font-size * 1px;
+  -webkit-line-clamp: $line-count;
   line-height: $line-height * 1px;
-  max-height: 1em * $line-count * $line-height / $font-size;
   overflow: hidden;
 }

Comment 10

[Ed Lee :Mardak]

Looks like we might want webkit-line-clamp to fix bug 1528447 as well. Blocking bug 1512725 to fix in new pocket experience but we probably still want to fix this for existing highlights as not everywhere will get new experience. Setting P2 for now hopefully will be available by next release.

Comment 11

[Ed Lee :Mardak]

Attachment: current autoland with display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3

Comment 12

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/5014

Comment 13

[Ed Lee :Mardak]

wolasi, is the screenshot in comment 11 attachment 9063702 [details] good to land?

Comment 14

[Wolasi :wolasi]

Yes, clamping in screenshot looks good to land.

What are the parameters for the line-clamp property? Can it be context sensitive?
For example let's say a full title occupies 4 lines, can we have the excerpt clamp at 2 lines instead of 3?

Comment 15

[Ed Lee :Mardak]

dholbert, do you know if there's some combination of styles/html that would allow clamping lines counted across multiple elements? E.g., total 6 lines where title could have 1, 2 or 3 lines and the excerpt should get the remainder 5, 4 or 3 lines.

Initial basic attempts of line-clamp on the parent of title+excerpt results in excerpt's lines being counted.

Comment 16

[Daniel Holbert [:dholbert]]

redirecting you to heycam who implemented this & is more likely to know.

Comment 17

[Daniel Holbert [:dholbert]]

My rough understanding is that this operates on a per-block-container basis -- so to share a max-num-lines between title + blurb, you need to put them in the same block (same non-anonymous flex item), and neither the title nor the blurb can itself be a block, I think... Like this:
https://jsfiddle.net/L54qgcsf/1/

I'm using a larger font-size on the title, like we do on the new-tab page. Also, I've only tested this in Chrome so far, but hopefully it'll work in the next Firefox nightly. If not, it's a bug. :)

(Also: with the larger font-size, I'm not sure a fixed number of lines for the whole thing is really what you want... note that 6 lines of title-text will be a good bit taller than 6 lines of body text.)

Comment 18

[Ed Lee :Mardak]

Ah, the title/children not being a block seems to be key if we also want the title to be clamped (thus requiring (?) it to be a block).

Comment 19

[Cameron McCormack (:heycam)]

The title and blurbs can be blocks themselves, they just can't be BFCs. So if you want to limit to say 6 lines of text regardless of whether they are title lines or blurb lines you can do:

<div style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6">
  <div class="title">Title text</div>
  <div class="blurb">Blurb text</div>
</div>

And you can limit the title to 3 lines and limit the blurb to 3 lines by applying the clamping to separate <div>s. But you can't do anything more complex like "limit the title to 3 lines and have the blurb take up the remainder of 6 lines".

The standards based line-clamp/max-lines would be able to do that, AFAIK, but that won't be implemented soon.

Comment 20

[Daniel Holbert [:dholbert]]

Also, I'm just realizing that in comment #15 you really want two levels of clamping (title is clamped to 3 lines, and then the already-clamped-title-plus-blurb is clamped to 6 lines).

I don't believe there's a way to do that right now.

Comment 21

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/a07d7f8f53ca

Comment 22

[Marius Coman [:mcoman], Ecosystem QA]

I have verified this issue with the latest Firefox Nightly (68.0a1 Build ID - 20190513082256) installed, on Windows 10 x64, Arch Linux and Mac 10.14.4. Now, ellipsis are shown at the end of long titles and line-clamp at the end of the description texts.