文本溢出剪切边框半径

Question

我正在尝试实现一个表格，其中tds的内容为text-overflow: ellipsis，但是剪辑通常发生在与twitter bootstraps label类有链接的地方（给它一个边框半径） ）。

如您所见，它会剪切边框半径，使其平坦。每个TD都需要是一行文本，这就是我使用white-space: nowrap的原因。如果它在那个位置剪辑，我有没有办法在标签上有圆角？

继承人：http://jsfiddle.net/cuJ83/13/

Answer 1

Demo Fiddle

您希望在a.label而不是父td上应用规则。以下应该这样做：

td > a.label{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display:block;
    text-align:left;
}

Answer 2

检查此 Demo jsFiddle

CSS

.thin {
    width: 200px;
    border: 1px solid #000;
    padding: 5px
}
.label {
    border-radius: 1em;
    color: #000;
    background: #ccc;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}
table {
    table-layout: fixed;
    width: 100%
}
table td {
    padding-right: 30px;    
    white-space: nowrap;
}

结果

Answer 3

我找到了满意的结果。我需要将文本溢出应用于a标签，并使用max-width。然后我只需要在容器或td中添加填充以将其全部放入边界。

.label {
    border-radius: 1em;
    color: #000;
    background: #ccc;
    max-width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
}
table { table-layout: fixed; width: 100% }
table td {
    white-space: nowrap;
    padding-right: 30px;
}

jsFiddle Example

唯一需要注意的是，在标签之后，它不会处理文本上的溢出。我并没有因为那是不可能的事情而辞职，但尚未解决这个问题，对于我的用例而言，它并不适用。