title: Don’t wrap span elements
body: <p>I’ve got a list of <code>&lt;span&gt;</code> elements that can be moved left and right inside a <code>&lt;div&gt;</code> element, and if some spans go outside the div they should be hidden. This works fine using <code>overflow: hidden</code>.  However, if there are more spans than fit in the div, the spans wrap, which is undesired behaviour for my use case. How do I make the spans not wrap?</p>
  
  <p>I’ve made a <a href="http://jsfiddle.net/33kj4/" rel="noreferrer">jsFiddle</a> to show what I mean. When you click inside the <code>.board</code> you’ll add another <code>.card</code>. By the fourth card you’ll see the wrapping. </p>
  
  <p><strong>Note:</strong> The fact that spans are used is not really important, so if it can be made to work with e.g. list items, that would probably be okay. The important thing is that the elements can contain an image and some text underneath.</p>
  
  <p>Here’s the code from the jsFiddle:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="board"&gt;
     &lt;div class="cards"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$('.board').mousemove(function(e) {
      $('.cards').css({left: e.pageX});
  });
  
  $('.board').click(function(e) {
     $('.cards').append("&lt;span class='card'&gt;&lt;/span&gt;") 
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.card {
      border: 1px solid black;
      width: 100px;
      height: 100px;
      float: left;
      margin-left: 4px;
      margin-right: 4px;   
  }  
  
  .cards {
      position: relative;
      top: 10px; 
  }
  
  .board {
      width: 400px;
      height: 120px;
      border: 1px solid red;
      position: relative;
      overflow: hidden;
  }
  </code></pre>