An approach for handling overflow

We often have limited space and the possibility of too much content. The result is that content overflows its container and, if we haven't planned for it, messes up our beautiful page.

Text overflow is easily handled using `text-overflow: ellipses`. Block element overflow is less easily handled. Here I show `inline-block` elements, which I've called chiclets, that overflow their `tile` container. Typically these would just be cut off.

To mitigate this I let my `inline-block` elements flow past the right edge of their container and I add a fade-out effect at the edge of the container. A large bottom margin on my chiclets ensures that if they do wrap, then the wrapped chiclets render out of sight. This softens the clipped look you usually get in this instance.

The effect:

Cupcake ipsum dolor sit amet

Bonbon chocolate cake jujubes bear claw. Tiramisu liquorice danish cotton candy chocolate cookie apple pie. Jelly-o chocolate chocolate bar muffin chocolate cake pastry. Soufflé caramels marzipan sweet roll bear claw cheesecake.

  • chupa chups
  • marshmallow
  • cheesecake
  • salted chocolates

The markup:

<div class="tile">
  <h2>Cupcake ipsum dolor sit amet</h2>
  <p>Bonbon chocolate cake jujubes bear claw. Tiramisu liquorice danish cotton candy chocolate cookie apple pie. Jelly-o chocolate chocolate bar muffin chocolate cake pastry. Soufflé caramels marzipan sweet roll bear claw cheesecake.</p>
  <footer>
    <ul class="chiclets">   
      <li class="chiclet">chupa chups</li>      
      <li class="chiclet">marshmallow </li>     
      <li class="chiclet">cheesecake </li>      
      <li class="chiclet">salted chocolates </li>
    </ul>
  </footer>
</div>

And the CSS:

.tile {
    max-width: 300px;
    max-height: 100px;
    border: 1px solid #888;
    border-radius: 4px;
    padding: 1em;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.tile:after {
    content: " ";
    display: block;
    width: 30px;
    height: 140px;
    position: absolute;
    top: 0;
    right: 0;
    background-image: -o-linear-gradient(left,transparent 0,#fff 95%);
    background-image: linear-gradient(to right,transparent 0,#fff 95%);
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#ffffffff', GradientType=1);
}
.chiclets {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 20px;
    width: 120%;
}
.chiclet {
    float: left;
    clear: none;
    display: inline-block;
    font-size: 11px;
    padding: 3px 5px 4px 5px;
    margin: 0px 0px 50px 5px;
    min-width: 10px;
    background-color: #a4cdf0;
}