1010573 - Text flows out of DIV element

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[gage]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140506152807

Steps to reproduce:

1) Goto http://www.cheesecakebb.net/index.php?action=vb and it's the first one on the page


Actual results:

Text flows out of containing div


Expected results:

Text should've wrapped

Comment 1

[Daniel Holbert [:dholbert]]

The text isn't wrapping because it's inside of a <pre> element.
Specifically, the page source has:
{
<pre><p class="viewpostp">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper, turpis vitae ornare mollis, felis ipsum placerat lorem, eu vehicula dolor odio a dui. Phasellus lobortis adipiscing metus. Fusce convallis turpis quis tellus porttitor, vel semper nunc mattis. Donec a magna et eros ultricies sollicitudin. Nam eu enim rutrum, eleifend nisl et, malesuada quam. Nulla malesuada eget est in aliquam. Fusce tristique varius iaculis. Nam et sagittis lorem.

Phasellus commodo a ipsum non vestibulum. Vivamus varius massa a lacus tempus, ac eleifend nisi adipiscing. Suspendisse et sem ut dui porta laoreet vel vitae ligula. Fusce et enim fringilla, viverra nulla tincidunt, sollicitudin magna. Praesent vitae metus non magna semper interdum laoreet eu nisi. Sed ac accumsan ante. Nam consequat sapien laoreet enim pulvinar, non pellentesque nisl convallis. Donec quis purus vel urna consectetur fringilla. Duis a turpis in dolor viverra pharetra a ut felis.
}

(With "Lorem ipsum..." all on one line in the source, and "Phasellus commodo..." all on one line in the source.)

As documented at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre , "Whitespaces inside this element are displayed as typed." (including newlines)

Comment 2

[gage]

How can I fix this? I need the <pre> element

Comment 3

[Daniel Holbert [:dholbert]]

Specifically, the <pre> element sets "white-space: pre", which per CSS spec, gives this behavior:
> Lines are only broken at preserved newline characters.
http://www.w3.org/TR/CSS21/text.html#white-space-prop

Chrome seems to disagree with our rendering due to the "word-wrap" property in the URL. Reduced testcase where Chrome wraps but Gecko does not:
{
data:text/html,<div style="white-space:pre; word-wrap:break-word; width:50px; border:1px solid black">does this text wrap
}

This seems to be a Chrome bug, since the CSS spec for word-wrap says "It only has an effect when white-space allows wrapping." (and white-space:pre does not allow wrapping)
http://dev.w3.org/csswg/css-text-3/#overflow-wrap-property

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to gage from comment #2)
> How can I fix this? I need the <pre> element

Looks like you may have already fixed it on the live URL by setting white-space: pre-wrap.

Comment 5

[gage]

Yep! Thanks :)

Comment 6

[Daniel Holbert [:dholbert]]

I filed https://code.google.com/p/chromium/issues/detail?id=373502 to get this fixed in Blink, BTW.