CSS overflow: hidden cuts shadow

This is how it looks like now:

When I disable overflow: hidden; shadow is normally all around, but when it's on - it's cut on the left and on the top. I'm not sure why it's only cutting those two sides, but still it looks not nice as for now. How to get rid of that?

Code:

.toolong { width: 80%; overflow: hidden; white-space:nowrap; text-overflow: ellipsis; }
.shadow { text-shadow: 2px 2px 2px black, -2px -2px 2px black, 2px -2px 2px black, -2px 2px 2px black, 4px 4px 4px black, -4px -4px 4px black, 4px -4px 4px black, -4px 4px 4px black; font-weight: bold;
}
<div> <h2><span>1</span></h2> <h3> Piotrek z Bagien <br> <span><h4>Pinta</h4></span> <span><h6>India Pale Ale (Poland)</h6></span> </h3> </div>

1 Answer

I would recommend adding padding to the top and left:

JS Fiddle

.toolong { width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 5px; padding-top: 5px;
}

And if you need, you can re-align them back in place using negative margins:

JS Fiddle

.toolong { width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 5px; padding-top: 5px; margin-left: -5px; margin-top: -5px;
}