Bug 45269 - CSS3: word-break:break-all not working within the non-line-box element
Summary: CSS3: word-break:break-all not working within the non-line-box element
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2010-09-06 08:14 PDT by YumeYao
Modified: 2010-09-07 12:22 PDT (History)
2 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description YumeYao 2010-09-06 08:14:06 PDT
According to w3.org:


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:


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:
<div style="width:800px; word-break:break-all;">
<img src="a.gif" style="float:right;" />

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.