1564865 - text-align-last doesn't work properly with line-clamp /overflow: hidden

Status: NEW

(Core :: Layout: Block and Inline, enhancement, P5)

Description

[sigurdur]

Attachment: Example of a non-functioning page

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36

Steps to reproduce:

1. Write content that spans 3+ lines
2. Set text-align to justify
3. Set text-align-last to center
4. Set line-clamp to 2 lines (ellipsis optional)
5. Set overflow to hidden
6. Last visible line is now justified, not centered.

Codepen showing the results: https://codepen.io/sigurdur/pen/KjJMRL

Actual results:

The last line, which is hidden, is centered but not the visible line.
The last visible line is not centered.

Expected results:

Last visible line should be centered.

Comment 1

[Alin Ilea, Desktop QA]

Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

Hi,

I have managed to reproduce this issue on latest FF release 68.0 and latest Nightly build 70.0a1 (2019-07-15) using Ubuntu 18.04 and Windows 10.
The issue is also reproducible on Chrome and IE so I'm not sure this is a specific Firefox issue.

I will move this over to a component so developers can take a look over it and give us their opinion. If is not the correct component please feel free to change it to an appropriate one.

Thanks for the report.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

This is the same as it works in Chrome and WebKit right?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Given -webkit-line-clamp was implemented for compat and that we're interoperable, it's not clear what should we do here.