不要包装跨度元素 [英] Don’t wrap span elements

问题描述

我有一个< span> 元素的列表，这些元素可以在< div> 元素，如果某些跨度超出div，则应将其隐藏。使用溢出：隐藏可以很好地工作。但是，如果跨度超出div的大小，则跨度将自动换行，这对于我的用例而言是不希望的行为。如何使跨度不环绕？

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?

我已经制作了 jsFiddle 来说明我的意思。在 .board 中单击时，将添加另一个 .card 。在第四张卡片上，您会看到包装纸。

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.

这是jsFiddle中的代码：

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

推荐答案

您可以使用内联块在.card而不是float上，然后禁用nowrap包装：

You can use inline-block on .card in stead of float, and then disable wrapping with nowrap:

对于.card：

display:inline-block;

对于卡片：

white-space:nowrap;

http://jsfiddle.net/33kj4/1/

这篇关于不要包装跨度元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！