Bug 219488 - Right aligned text with line clamp not working correctly
Summary: Right aligned text with line clamp not working correctly
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac macOS 10.14
: P2 Minor
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks: 233770
  Show dependency treegraph
 
Reported: 2020-12-03 05:27 PST by Olga Giza
Modified: 2021-12-02 10:22 PST (History)
7 users (show)

See Also:


Attachments
test case (622 bytes, text/html)
2020-12-07 11:46 PST, Smoley
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Olga Giza 2020-12-03 05:27:37 PST
Combination of line-clamp and text-align: right is not working properly.

Ellipsis not displayed (it is outside of the container - we can see that when overflow: hidden prop is removed)

Example:
```
<style>
  p {
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
    text-align: right;
  }
</style>
<p>
long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
</p>

```

Might be related to https://bugs.webkit.org/show_bug.cgi?id=219100
Comment 1 Smoley 2020-12-07 11:46:33 PST
Created attachment 415569 [details]
test case
Comment 2 Smoley 2020-12-07 11:52:49 PST
Thanks for filing, I can reproduce this on Safari 13.1.3 - STP 116.
Comment 3 Radar WebKit Bug Importer 2020-12-07 11:53:01 PST
<rdar://problem/72057365>
Comment 4 Ilya Tratseuski 2021-05-28 02:16:44 PDT
This bug also reproducible for RTL languages (such as Arabic or Hebrew) with dir attribute set to 'rtl' or 'auto' and text-align: left