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 class="col-sm-12">
                <h2 class="pull-right"><span class="label label-warning">1</span></h2>
            <h3 class="pull-left shadow toolong">         
               Piotrek z Bagien
               <br>
               <span><h4 class="gray shadow">Pinta</h4></span>
                <span><h6 class="gray shadow">India Pale Ale (Poland)</h6></span>              
            </h3>   
            </div>

回答1:

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;
}

来源：https://stackoverflow.com/questions/33949013/css-overflow-hidden-cuts-shadow

标签

css

twitter-bootstrap-3