Не обертывайте элементы span

Ive получил список элементов <span>, которые можно перемещать влево и вправо внутри элемента <div>, и если некоторые промежутки выходят за пределы div, они должны быть скрыты. Это работает отлично, используя overflow: hidden. Однако, если в div больше пробелов, чем в div, обтекание охватывает, что является нежелательным поведением для моего варианта использования. Как сделать прокрутки не обернутыми?

Ive сделал jsFiddle, чтобы показать, что я имею в виду. Когда вы нажмете внутри .board, вы добавите еще один .card. По четвертой карте вы увидите упаковку.

Примечание. Тот факт, что используются интервалы, не очень важен, поэтому, если его можно заставить работать, например, элементы списка, которые, вероятно, будут в порядке. Важно то, что элементы могут содержать изображение и текст под ним.

Вот код из jsFiddle:

<div class="board">
   <div class="cards"></div>
</div>

$('.board').mousemove(function(e) {
    $('.cards').css({left: e.pageX});
});

$('.board').click(function(e) {
   $('.cards').append("<span class='card'></span>") 
});

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

Ответы

display:inline-block;

white-space:nowrap;

.cards {
    position: relative;
    top: 10px;
    width: 99999%;
}

.cards {
    white-space: nowrap;
    float: left;
}