Last Comment Bug 543211 - word-wrap:break-word doesn't affect preferred minimum width
: word-wrap:break-word doesn't affect preferred minimum width
Status: RESOLVED WONTFIX
:
Product: Core
Classification: Components
Component: Layout: Text (show other bugs)
: unspecified
: x86 Windows XP
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2010-01-30 07:25 PST by ALK
Modified: 2014-04-05 16:42 PDT (History)
6 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
The testcase from comment 0 (6.70 KB, text/html)
2010-04-20 23:15 PDT, Simon Montagu :smontagu
no flags Details
Same thing with "table-layout: fixed" (6.89 KB, text/html)
2010-04-20 23:32 PDT, Simon Montagu :smontagu
no flags Details
td specifies width but content does not break word (556 bytes, text/html)
2010-04-21 05:56 PDT, Leo Tohill
no flags Details
Testcase that doesn't involve tables (285 bytes, text/html)
2010-04-21 11:29 PDT, Boris Zbarsky [:bz]
no flags Details
testing-safari-break-word.png (93.01 KB, image/png)
2014-04-04 18:18 PDT, Karl Dubost :karlcow
no flags Details
test-word-break.html (1.32 KB, text/html)
2014-04-05 15:50 PDT, Karl Dubost :karlcow
no flags Details

Description ALK 2010-01-30 07:25:54 PST
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.1.7) Gecko/20091221 MRA 5.3 (build 02552) Firefox/3.5.7 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.1.7) Gecko/20091221 MRA 5.3 (build 02552) Firefox/3.5.7 (.NET CLR 3.5.30729)

<html>
<head></head>
<body>

<div style="border: 1px solid Blue;word-wrap:break-word;width:100%">
))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
</div>

<br><br>

<table width=100% border="1">
<tr>
<td>
<div style="border: 1px solid Blue;word-wrap:break-word;width:100%">
))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
</div>
</td>
</tr>
</table>

<hr>

<br><br>

<p style="border: 1px solid Blue;word-wrap:break-word;width:100%">
))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
</p>

<br><br>

<table width=100% border="1">
<tr>
<td>
<p style="border: 1px solid Blue;word-wrap:break-word;width:100%">
))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
</p>
</td>
</tr>
</table>

<hr>

<br><br>

<span style="border: 1px solid Blue;word-wrap:break-word;width:100%">
))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
</span>

<br><br>

<table width=100% border="1">
<tr>
<td>
<span style="border: 1px solid Blue;word-wrap:break-word;width:100%">
))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
</span>
</td>
</tr>
</table>

<hr>


<body>
</html>


Reproducible: Always
Comment 1 Kevin Brosnan 2010-01-30 07:39:25 PST

*** This bug has been marked as a duplicate of bug 249159 ***
Comment 2 Leo Tohill 2010-04-20 19:58:41 PDT
I believe that was incorrectly set to status duplicate of 249149.  

The problem is that break-word isn't working within a td element.  

What does it take to re-open this?
Comment 3 Simon Montagu :smontagu 2010-04-20 23:10:36 PDT
Yes, this is not a duplicate. "word-wrap: break-word" and "word-break" are two completely different things. Reopening and taking.
Comment 4 Simon Montagu :smontagu 2010-04-20 23:15:43 PDT
Created attachment 440429 [details]
The testcase from comment 0
Comment 5 Simon Montagu :smontagu 2010-04-20 23:32:47 PDT
Created attachment 440430 [details]
Same thing with "table-layout: fixed"

If I am not mistaken this is invalid, because without "table-layout: fixed" the tables expand to fit the content, and word wrapping doesn't kick in.
Comment 6 Leo Tohill 2010-04-21 05:56:35 PDT
Created attachment 440477 [details]
td specifies width but content does not break word

when td specifies a width, break-word should kick in the preserve the width, yes?  See attachment.
Comment 7 Simon Montagu :smontagu 2010-04-21 07:36:41 PDT
That case can also be fixed by adding "table-layout: fixed" and a width to the <table>. I think this is correct, but I'm not 100% sure. Let someone more familiar with table layout make the call.
Comment 8 Leo Tohill 2010-04-21 10:43:06 PDT
I hope that fixed layout is not a requisite.  fwiw, chrome does have that requirement, IE8 doesn't.
Comment 9 Boris Zbarsky [:bz] 2010-04-21 11:29:10 PDT
Hmm.  This is a matter of whether word-wrap:break-word can affect the preferred minimum width.  It probably should, though CSS2.1 doesn't specify how this width is actually computed so pretty much any behavior is ok here per specs.
Comment 10 Boris Zbarsky [:bz] 2010-04-21 11:29:34 PDT
Created attachment 440565 [details]
Testcase that doesn't involve tables
Comment 11 Boris Zbarsky [:bz] 2010-04-21 11:34:49 PDT
If the preferred minimum width is in fact supposed to be affected by word-wrap, then IE8 should be breaking "Asingleword" in the testcase I just attached, and it certainly doesn't do that.... in standards mode.  If I force it into quirks mode, it does.  The original testcases in this bug are in quirks mode.  If I put them in standards mode, they don't linebreak in IE8 either.

This sounds like an issue to raise with the CSS working group in general, but for now the standards-mode behavior of all the browsers involved appears to be the same.
Comment 12 David Baron :dbaron: ⌚️UTC+2 (mostly busy through August 4; review requests must explain patch) 2010-04-21 15:26:55 PDT
The question is whether we want 'word-wrap: break-word' to affect the minimum intrinsic width of a chunk of text (i.e., what we implement in nsTextFrame::GetMinWidth).  I think it's probably better for it not to; i.e., to say that our current behavior is correct.  I don't think any specs say one way or the other.
Comment 13 Boris Zbarsky [:bz] 2010-04-21 20:49:37 PDT
They don't, right.  That's what I said in comment 11.

Given that webkit and IE8 behavior matches ours, and that David thinks ours is good...  wontfix.
Comment 14 Karl Dubost :karlcow 2014-04-04 18:18:17 PDT
Created attachment 8402133 [details]
testing-safari-break-word.png

The combination of word-break and table are not that clear. Not sure it's totally the right bug, but it seems to touch the same issue. 

This is a screenshot of a long text with break-word in a table, a p, and a p with display:table-cell in Safari Version 7.0.3 (9537.75.14).

You will notice that the break-word is applied.

On the other hand you can check on what is happening on Firefox 28.0
(on the left, word-wrap: break-word; is commented
 on the right, word-wrap: break-word; is applied)
http://www.la-grange.net/2014/02/28/word-break

There's a behavior difference in between safari and firefox.
Comment 15 Boris Zbarsky [:bz] 2014-04-05 06:51:36 PDT
Karl, what's the HTML that you're testing there?  This testcase:

<!DOCTYPE html>
<body style="width: 0; word-wrap: break-word">
  <table><tr> <td>
      abcdefgh
  </td></tr></table>
</body>

doesn't show Safari doing any breaking, at least in Safari 6.1.3.
Comment 16 Karl Dubost :karlcow 2014-04-05 15:50:29 PDT
Created attachment 8402237 [details]
test-word-break.html

Boris,

this is the HTML tested.
Comment 17 Boris Zbarsky [:bz] 2014-04-05 16:42:52 PDT
Ah, I see.

So the thing is, on that testcase Safari's behavior doesn't change if you remove the "word-wrap: break-word;".  So the rendering difference is not in the handling of break-word but just in default line-breaking behavior.  In particular, Safari will line-break on a '?' in the middle of a string of letters by default, but we won't, as far as I can tell.

Note You need to log in before you can comment on or make changes to this bug.