JSFiddle - React, Tailwind, and code Playground
by Lexogram
HTML
<p>
bq<span>dp</span>
</p>
<p class="hidden-overflow">
bq <span>dp</span>
</p>
CSS
p {
position: absolute;
font-size: 30vmin;
background-color: rgba(0,0,0, 0.2);
margin: 0;
}
span {
display: inline-block;
width: 0.8em;
background-color: #eee;
}
p.hidden-overflow {
color: blue;
background-color: rgba(0,0,255, 0.2);
padding: 0 0.2em 0 0;
}
p.hidden-overflow span {
overflow: hidden
}