[css-text] Differences in white-space:pre-wrap behavior

Hello everybody,

I'm currently using "white-space: pre-wrap" in a project and noticed that there are some fairly significant differences in how browsers are interpreting it.

I put together a simple example (code below) that take a div of an explicit width and then put a span inside containing various text content that would be wider than its parent.  The output between IE, Firefox, and Chrome is completely different.  The results also differ between the browsers (in other interesting ways) if you vary whether the inner span is display:inline or display:inline-block.

I'm curious what the correct behavior is.  Thanks,
 -Chris

http://jsfiddle.net/PjFF3/

<!doctype html>
<html>
<head>
<style>
div {
font-family: "Courier New";
font-size: 12px;
border: 1px solid red;
width: 240px;
margin: 20px;
}
span {
display: inline;
background: lightgray;
white-space:pre-wrap;
}
.inlineblock {
display: inline-block;
}
</style>
</head>
<body>
inner span display:inline
<div><span>Spaces                                                </span></div>
<div><span>Spaces w/ newline                                     
</span></div>
<div><span>Spaces w/ newline and letter                          
a</span></div>
inner span display:inline-block
<div><span class="inlineblock">Spaces                                                </span></div>
<div><span class="inlineblock">Spaces w/ newline                                     
</span></div>
<div><span class="inlineblock">Spaces w/ newline and letter                          
a</span></div>
</body>
</html>

Received on Wednesday, 6 November 2013 17:35:54 UTC