不要包装 span 元素答案

【问题标题】：Don’t wrap span elements不要包装 span 元素
【发布时间】：2013-07-04 05:50:09
【问题描述】：

我有一个<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;
}

【问题讨论】：

标签： css word-wrap

【解决方案1】：

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

对于.card：

display:inline-block;

对于 .cards：

white-space:nowrap;

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

【讨论】：

注意制作卡片inline-block可能会影响每张卡片之间的空间大小。一些浏览器，比如 Firefox，会在 HTML 中的每张卡片之间添加一个额外的空格字符，因为标签之间有空格。
@RoryO'Kane 这是真的。从他的代码来看，跨度之间没有空格，所以应该没问题。不过，这是需要注意的。

【解决方案2】：

尝试将其添加到您的 CSS：

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

【讨论】：

【解决方案3】：

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

【讨论】：

几个有趣的相关答案here.

【解决方案4】：

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

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

jsFiddle

.cards 的默认宽度被限制为其父 .board、400px 的宽度。大多数情况下，具有最大宽度是好的，因为它会使孩子在必要时进行换行。但既然你不介意溢出，就可以覆盖它。

【讨论】：