I’ve got a list of <span> elements that can be moved left and right inside a <div> element, and if some spans go outside the div they should be hidden. This works fine using overflow: hidden. 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?
I’ve made a jsFiddle to show what I mean. When you click inside the .board you’ll add another .card. By the fourth card you’ll see the wrapping.
Note: 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.
Here’s the code from the 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;
}
You can use inline-block on .card in stead of float, and then disable wrapping with nowrap:
For .card:
display:inline-block;
For .cards:
white-space:nowrap;