Bug 245459

Summary:	Overflow line-clamp block content visible unexpectedly
Product:	WebKit	Reporter:	Woody Lee <woodlxf00>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED DUPLICATE
Severity:	Normal	CC:	ahmad.saleem792, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	Safari 15
Hardware:	All
OS:	All

Description Woody Lee 2022-09-20 22:29:22 PDT

The block element after inline + <br> element visible unexpectedly.
Even overlap with previous content.

Reproduced both in MacOS, iPad, iPhone with version 15.6 and 16.

Example:
https://codepen.io/Woody-lxf/pen/bGMRXwv

HTML
<div class="box">
  test text content 111<br>test text content 222<br>test text content 333<br><p>test text content 444</p>
</div>

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

Comment 1 Ahmad Saleem 2022-09-21 15:37:55 PDT

*** Safari 16 & Safari Technology Preview 154 ***

test text content 111
test text content 222... (but ... is not selectable)
test text content 333
test text content 444

*** Chrome Canary 108 ***

test text content 111
test text content 222... (but ... is not selectable)

*** Firefox Nightly 107 ***

test text content 111
test text content 222... (but ... is not selectable)

_______

From CodePen in Comment 0. Thanks!

Comment 2 Radar WebKit Bug Importer 2022-09-27 22:30:18 PDT

<rdar://problem/100491976>

Comment 3 Karl Dubost 2022-09-28 01:21:02 PDT


*** This bug has been marked as a duplicate of bug 244286 ***