CSS溢出:隐藏的阴影 [英] CSS overflow: hidden cuts shadow

问题描述

这是现在的样子:

当我禁用 overflow:hidden; 阴影时，通常到处都是阴影，但是当它打开时，它在左侧和顶部被剪切.我不确定为什么只裁掉了这两个方面，但到目前为止看起来还是不太好.如何摆脱呢?

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?

代码:

.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>

推荐答案

我建议在顶部和左侧添加 padding :

I would recommend adding padding to the top and left:

JS小提琴

.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小提琴

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

这篇关于CSS溢出:隐藏的阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！