title: CSS overflow: hidden cuts shadow
body: <p>This is how it looks like now:</p>
  
  <p><a href="https://i.stack.imgur.com/VnKad.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VnKad.png" alt="enter image description here"></a></p>
  
  <p>When I disable <code>overflow: hidden;</code> 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?</p>
  
  <p>Code:</p>
  
  <pre><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;
  }
  
  &lt;div class="col-sm-12"&gt;
                  &lt;h2 class="pull-right"&gt;&lt;span class="label label-warning"&gt;1&lt;/span&gt;&lt;/h2&gt;
              &lt;h3 class="pull-left shadow toolong"&gt;         
                 Piotrek z Bagien
                 &lt;br&gt;
                 &lt;span&gt;&lt;h4 class="gray shadow"&gt;Pinta&lt;/h4&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;h6 class="gray shadow"&gt;India Pale Ale (Poland)&lt;/h6&gt;&lt;/span&gt;              
              &lt;/h3&gt;   
              &lt;/div&gt;
  </code></pre>