CODEWITHSUNDEEP
htmlcsspseudo-element
jedierikb
jedierikb

Reputation: 13079

erratic line wrapping with after pseudo-element

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>

Upvotes: 0

Views: 171

Answers (1)

maioman
maioman

Reputation: 18734

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?

Upvotes: 1

Related Questions