CSS溢出：隐藏剪切阴影

现在是这样的：

当我禁用时overflow: hidden;阴影通常遍布四周，但当它打开时 - 它会在左侧和顶部被切割。我不知道为什么它只切割这两侧，但目前看起来仍然不太好。如何摆脱它？

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>

我建议添加padding到顶部和左侧：

JSFiddle http://jsfiddle.net/nzep7emr/

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

如果需要，您可以使用负边距将它们重新对齐：

JSFiddle http://jsfiddle.net/nzep7emr/1/

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