通过 CSS 截断 GridView 列标题文本答案

【问题标题】：Truncate GridView Column Header Text by CSS通过 CSS 截断 GridView 列标题文本
【发布时间】：2014-04-17 18:50:08
【问题描述】：

我把这个样式放在了 ASP 头部

<style type="text/css">
    .truncated
    {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

并将其应用于 GridView 单元格

<CellStyle CssClass="truncated"></CellStyle>

效果很好。

但是，当我尝试将相同的样式应用于页眉时

<HeaderStyle CssClass="truncated"></HeaderStyle>

失败了。我想列标题中的溢出文本（文本长度超过列宽）可以截断为：abcdef -> abcd ... 但是溢出的文字只是隐藏起来，没有出现省略号效果，即没有出现“...”。

关于这个问题的任何想法或解决方案的任何其他建议？谢谢！

【问题讨论】：

“失败了。” ?这到底是什么意思？
抱歉解释不清楚。我想列标题中的溢出文本可以截断为：abcdefg -> abcd...（类似的东西）。但文字只是隐藏，没有省略号效果，即没有“...”出现
伙计，请记住，当这里有人说“你是什么意思”并批评你的陈述时，他们可能根本不知道答案。谁知道答案不会被这么简单的词卡住。这就像这里的一种拖钓形式。

标签： asp.net css gridview aspxgridview

【解决方案1】：

尝试为 .truncated 规则集添加宽度（或最大宽度）。

【讨论】：

【解决方案2】：

发生这种情况是因为 HeaderStyle 将样式应用于标题行而不是标题的特定单元格。为了将样式应用于标题单元格，请将您的样式更改为：

<style type="text/css">
    .truncated th
    {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 50px;
        display: inline-block;
    }
</style>

您可以根据需要调整宽度。

【讨论】：