文本溢出剪切边框半径答案

【问题标题】：Text-overflow clipping border radius文本溢出剪切边框半径
【发布时间】：2014-05-31 14:23:05
【问题描述】：

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

如您所见，它剪裁了边界半径，使其成为平端。每个 TD 都需要是一行文本，这就是我使用 white-space: nowrap 的原因。如果标签在那一点被夹住，有什么办法可以让标签上的圆边？

这是小提琴：http://jsfiddle.net/cuJ83/13/

【问题讨论】：

标签： css

【解决方案1】：

Demo Fiddle

您希望将规则应用于 a.label 而不是父 td。下面应该这样做：

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

【讨论】：

我会更新问题，但我应该提到我需要每个 TD 仅是一行文本。
不幸的是，您不能将text-overflow: ellipsis 应用于内联元素 - 所以您将无法按照您目前的布局方式使用 HTML/CSS 来完成此操作
您能再解释一下吗？我正在尝试将文本溢出应用于td，我认为这是一个块级元素？
text-overflow 仅适用于td 的文本内容，不适用于任何子元素及其文本内容，a 是其中之一
但在我的示例中您可以看到它适用于a?

【解决方案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;
}

结果

【讨论】：

我认为OP也希望保留省略号，否则我们无法知道是否还有更多消息。
谢谢！对于我在标签上的类似布局“最大宽度：100%”是一种治疗jsfiddle.net/Kitana/mde1sc54/16

【解决方案3】：

我找到了一个令人满意的结果。我需要将 text-overflow 应用到 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

唯一需要注意的是它不会处理标签 after 上的文本溢出。我不会接受这是不可能的，但还没有解决，对于我的用例来说它不适用。

【讨论】：

Demo Fiddle

检查这个Demo jsFiddle

CSS

结果

检查这个`Demo jsFiddle`