word-wrap:break-word doesn't affect preferred minimum width

RESOLVED WONTFIX

Status

()

Core
Layout: Text
RESOLVED WONTFIX
8 years ago
3 years ago

People

(Reporter: ALK, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(6 attachments)

(Reporter)

Description

8 years ago
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

Updated

8 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 249159

Comment 2

7 years ago
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?
Yes, this is not a duplicate. "word-wrap: break-word" and "word-break" are two completely different things. Reopening and taking.
Status: RESOLVED → UNCONFIRMED
Resolution: DUPLICATE → ---
Assignee: nobody → smontagu
Component: General → Layout: Text
Product: Firefox → Core
QA Contact: general → layout.fonts-and-text
Created attachment 440429 [details]
The testcase from comment 0
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

7 years ago
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.
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.
Assignee: smontagu → nobody
Component: Layout: Text → Layout: Tables
QA Contact: layout.fonts-and-text → layout.tables

Comment 8

7 years ago
I hope that fixed layout is not a requisite.  fwiw, chrome does have that requirement, IE8 doesn't.

Comment 9

7 years ago
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

7 years ago
Created attachment 440565 [details]
Testcase that doesn't involve tables

Comment 11

7 years ago
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.
Component: Layout: Tables → Layout: Block and Inline
QA Contact: layout.tables → layout.block-and-inline
Summary: CSS attribute "word-wrap:break-word" within table → word-wrap:break-word doesn't affect preferred minimum width
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.
Component: Layout: Block and Inline → Layout: Text
QA Contact: layout.block-and-inline → layout.fonts-and-text

Comment 13

7 years ago
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 8 years ago7 years ago
Resolution: --- → WONTFIX
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

3 years ago
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.
Created attachment 8402237 [details]
test-word-break.html

Boris,

this is the HTML tested.

Comment 17

3 years ago
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.
You need to log in before you can comment on or make changes to this bug.