0

I have an html layout which is reflowing in unexpected ways in chrome and safari. some bad text layout with lines overflowing

The structure of my document is such that every word in wrapped in a span, and every line is wrapped in a span, and then the document in wrapped in a div. To separate the lines I use the after pseudo-element as described here.

However, as you can see, the line breaking is erratic. What is going on here and how to best remedy this situation? I have found that changing the after pseudo-element from '\A'; to ' \A' the problem seems to go away, but I do not understand why.

.bc {
  border: solid 1px green;
  font-size: 25px;
  width: 500px;
  height: 200px;
}

div > span:after {
  content: '\A';
  white-space: pre;
}
<div class="bc"><span><span>HELLO, </span><span>how </span><span>is </span><span>Matilda.</span></span><span><span>MATILDA!, </span><span>kinsman </span><span>to </span><span>the </span><span>seahorses, </span><span>and </span><span>friend </span><span>to </span><span>Franklin.</span></span><span><span>EXTRA, </span><span>niece </span><span>to </span><span>Matilda, </span><span>never </span><span>pleasant </span><span>to </span><span>Emanuel.</span></span></div>
Community
  • 1
  • 1
jedierikb
  • 12,752
  • 22
  • 95
  • 166

1 Answers1

1

if you add word-wrap it seems to be working

.bc {
  border: solid 1px green;
  font-size: 25px;
  width: 500px;
  height: 200px;
 /*word-wrap: break-word;*/
}

div > span:after {
  content: '\A';
  white-space: pre;
}
<div class="bc"><span><span>HELLO, </span><span>how </span><span>is </span><span>Matilda.</span></span><span><span>MATILDA!, </span><span>kinsman </span><span>to </span><span>the </span><span>seahorses, </span><span>and </span><span>friend </span><span>to </span><span>Franklin.</span></span><span><span>EXTRA, </span><span>niece </span><span>to </span><span>Matilda, </span><span>never </span><span>pleasant </span><span>to </span><span>Emanuel. </span></span></div>

is this what you mean?

maioman
  • 18,154
  • 4
  • 36
  • 42
  • yes, that works. but as there are no huge words in this example to break, I am puzzled why this solution (and the one in the OP work). – jedierikb Aug 04 '15 at 15:02
  • Yes, but why does that work? The first long sentence does not require that addition. – jedierikb Aug 04 '15 at 15:09
  • I believe that's how `white-space: pre;` works; try to use `white-space: pre-wrap;` and it will work without trailing space – maioman Aug 04 '15 at 15:23