i using ghost element css centering unknown child , seeing weird behavior when string has strange characters in it.
when i'm rendering normal string output looks this:
and when have string weird characters looks this:
here's string being rendered in second example:
the 2nd st. bridge waterfall best part of show ✨ὤc✨ ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9 great photo @agarrini ὄfὄfὄf tagging #igerslouisville ὠ4 ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9
html / css
.text { text-align: center; position: absolute; padding: 5%; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; overflow: hidden; } .text:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin: 0; } .message { display: inline-block; }<img src="http://www.placehold.it/500" /> <div class="text"> <div class="message"> <p>the 2nd st. bridge waterfall best part of show ✨ὤc✨ ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9 great photo @agarrini ὄfὄfὄf tagging #igerslouisville ὠ4 ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9ὓ9</p> </div> </div>this such strange issue, i've never seen these characters causing such layout issue before.
the problem
the problem isn't caused characters themselves, it's caused long unbroken string of text. replacing characters a has same problem:
.text { height: 200px; width: 200px; background: #f00; } .text:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; background: #f90; width: 0; } .text p { display: inline-block; }<div class="text"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </div>solution
the solution break long string in way (preferably on server side). in css break long strings word-wrap: break-word (or new standard overflow-wrap — browser support) , suitable width:
.text { height: 200px; width: 200px; background: #f00; } .text:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; background: #f90; width: 0; } .text p { display: inline-block; width: 90%; word-wrap: break-word; }<div class="text"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </div>