Back to basics: Apparently, nested <code> with display: inline-block and overflow: hidden results in weirdness dabblet.com/gist/7bc90a1bd7d…
4
6
2
14
see the very last sentence of drafts.csswg.org/css2/visude… for why
2
3
4
I think text-top or text-bottom (or, failing that, top or bottom) might be a safer workaround, though, since...
2
Actually, neither text-top, text-bottom or middle are a good workaround. Notice the parentheses, they're misaligned…
1
yeah, baseline is the only vertical-align value that truly aligns the same point in the parent and child (in most cases)
2
Yup, but in this case, baseline is on drugs… So there is no workaround?! :/
1
Replying to @LeaVerou
Can you avoid 'overflow: hidden'? I can't think of anything else offhand that would be reliable.

Sep 14, 2016 · 3:52 AM UTC

1
Replying to @davidbaron
Nope, I can't. The width of the <code>s is animated with steps() to simulate typing, so "future" chars need to be hidden.
1
1
If you control everything else in the same line, then 'top' and 'bottom' are probably safe.
1
more replies