Bug 45269

Summary: CSS3: word-break:break-all not working within the non-line-box element
Product: WebKit Reporter: YumeYao <yumeyao>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, mitz, rniwa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: PC   
OS: Windows 7   
Attachments:
Description Flags
Safari 15.6 differs from other browsers none

Description YumeYao 2010-09-06 08:14:06 PDT
According to w3.org:

word-wrap

This property specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box. It only has an effect when 'text-wrap' is either 'normal' or 'suppress'. Possible values:


word-break

This property specifies what set of line breaking restrictions are in effect within the element. Values have the following meanings:


You see, w3.org suggests that word-wrap[:break-word] applies to a line-box, my understanding of line-box is that something displayed as block, or something has a width property set in CSS. Relatively, word-break applies to an element, that is, anything.

So consider this html code:
<html><body>
<div style="width:800px; word-break:break-all;">
<img src="a.gif" style="float:right;" />
VERYLONGWORDaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaVERYLONGWORD
</div></body></html>

It's meant to break the VeryLongWord and display the text to the left of the right-floated image. And here are results:
Result on IE8: http://img687.imageshack.us/img687/189/ie8.png
Result on Webkit(also same on gecko, presto): http://img228.imageshack.us/img228/24/webkit.png

IE8 breaked the text as expected, while Webkit didn't and displayed the text in a whole line next to the image.


Then consider change word-break:break-all to word-wrap:break-word. This time, as suggested by w3.org, the VERYLONGWORDaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaVERYLONGWORD is not displayed as a line-box, so it's not breaked. All results are like the latter one.
Comment 1 YumeYao 2010-09-06 08:19:10 PDT
So my conclusion is that Webkit treats word-break:break-all as same as word-wrap:break-word, but IE8 distinguishes them according to w3.org reference.
Comment 2 Ahmad Saleem 2022-07-23 07:42:37 PDT
Created attachment 461157 [details]
Safari 15.6 differs from other browsers

I updated the test case and added random gif as below:

Test Case - https://jsfiddle.net/xoy72fzw/show

As can be seen from attached screenshot, I am able to reproduce this bug in Safari 15.6 on macOS 12.5, where it does not wrap text around GIF like other browsers. Just want to share updated results. Thanks!
Comment 3 Radar WebKit Bug Importer 2022-07-23 11:42:57 PDT
<rdar://problem/97488684>
Comment 4 Ahmad Saleem 2022-10-12 15:00:01 PDT
Seems to be fixed in Safari Technical Preview 155 and matching other browsers (Chrome Canary 108 and Firefox Nightly 107). Marking this as "RESOLVED CONFIGURATION CHANGED".
Comment 5 zalan 2022-10-12 15:09:16 PDT
IFC progression