25

我有一个<span>可以在元素内左右移动的元素列表<div>，如果一些跨度超出 div，它们应该被隐藏。这很好用overflow: hidden。但是，如果跨度超过 div 中的容量，则跨度会换行，这对我的用例来说是不受欢迎的行为。如何使跨度不换行？

我制作了一个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;
}
4

4 回答 4

50

您可以在 .card 上使用 inline-block 代替 float，然后使用 nowrap 禁用包装：

对于 .card：

display:inline-block;

对于 .cards：

white-space:nowrap;

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

于 2013-07-04T06:04:47.473 回答
1

只需将宽度设置.cards为一些巨大的数字：

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

jsFiddle

的默认宽度.cards受限于其父级.board,的宽度400px。大多数时候，有一个最大宽度是好的，因为它会使孩子在必要时换行。但是由于您不介意溢出，因此可以覆盖它。

于 2013-07-04T05:57:56.963 回答
1

尝试将此添加到您的 CSS 中：

.cards {
    white-space: nowrap;
    float: left;
}
于 2013-07-04T05:58:34.977 回答
1

您正在尝试使用 SPAN 元素进行“块”布局。SPAN 元素不适合块，这就是 DIV 的用途。

于 2013-07-04T06:07:26.043 回答