Bug 176499 - Ellipsis of -webkit-line-clamp disappears sometimes
Summary: Ellipsis of -webkit-line-clamp disappears sometimes
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Other
Hardware: All All
: P2 Minor
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks: 233770
  Show dependency treegraph
 
Reported: 2017-09-07 03:29 PDT by 宋燕
Modified: 2021-12-02 10:22 PST (History)
3 users (show)

See Also:


Attachments
it's a demo for this bug , click and see the ... will disappear (31.73 KB, application/x-rar)
2017-09-07 03:29 PDT, 宋燕
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description 宋燕 2017-09-07 03:29:13 PDT
Created attachment 320106 [details]
it's a demo for this bug , click and see the ... will disappear

make the style ellipsis over 2 lines, as: 
      div>p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 20px;
      }

then the dom use "(XXXX)"at the end of the second line ;

    <div>
      <p>中文名称中文名称中文名称中文名称中文名称中文名称中文名称中文名称中文名(中文名称)</p>
      <p>tryencgendafkjsakdfhask dhfkdjshtryencg endafkjsakdfhaskdhfkdjsh(asdfsadfsadf)</p>
    </div>

It looks good so far , for ellipsis with 2 lines . 

Then I change the upper element's height , like a div,  and the '...' disappear ! 

Please check the demo as attached . 

It was found at chrome 版本 59.0.3071.115(正式版本) (32 位) .