请勿缠绕跨度元素

我有一个<span>元素的列表，它可以在<div>元素内左右移动，如果某些跨度超出div，它们应该被隐藏。这工作正常使用overflow: hidden。但是，如果跨度比跨度更大，跨度将会自动换行，这对于我的用例来说是不受欢迎的行为。我如何使跨度不包裹？请勿缠绕跨度元素

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

来源

2013-07-04 Jonas

可以在浮动代替对.card使用内联块，然后禁用与NOWRAP包装：

对于.card：

display:inline-block;

对于.cards：

white-space:nowrap;

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

来源

2013-07-04 06:04:47 MaX

请注意，制作“inline-block”卡可能会影响每张卡之间的空间大小。一些浏览器，比如Firefox，会在字面上写在HTML中的每张卡片之间添加额外的空格字符，因为标签之间有空格。 –

谢谢，我会用这个解决方案。 – Jonas

@ RoryO'Kane的确如此。从他的代码看，跨度之间没有空白，所以它应该没问题。不过，这是需要注意的。 – MaX

刚刚成立的.cards宽度一些巨大的数字：

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

jsFiddle

默认宽度.cards限制为其父项的宽度.board,400px。大多数情况下，最大宽度是好的，因为如果有必要，会导致儿童包装。但既然你不介意溢出，可以重写这个。

来源

2013-07-04 05:57:56

谢谢，这也很好。 – Jonas

尝试增加给你的CSS：

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

来源

2013-07-04 05:58:34

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

来源

2013-07-04 06:07:26 Alexander

请勿缠绕跨度元素

回答

相关问题