css - 带有 twitter bootstrap 标签的最大宽度

Question

我正在尝试通过标签实现与SO类似的目标。

看起来 great ，但问题是我想要每个标签的最大宽度，所以如果标签的长度太大，它将被截断。

我可以通过以下方式实现:

.label{
    width: 50px;    
    float: left;    
    overflow: hidden;  
}

好的，它可以工作，但是当我这样做时，我的号码是 not on the same line as label .

如何才能达到与第一个 fiddle 相同的效果，但具有最大宽度。

Answer 1

这应该可以解决问题:

.label {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

JSFiddle demo .

我在这里所做的是删除float: left并用display: inline-block替换它。然后，我给它一个省略号 text-overflow 属性，使其看起来更好，并将 vertical-align 设置为 middle 来获取它与 .multiple 元素一致。哦，我已将 width 替换为 max-width，以阻止较小的标签具有相同的尺寸。

用法示例

下面是一个包含多个标签的示例(每个标签都故意换行):JSFiddle .

显然，您可以相应地调整max-width。