0

在 ASP.NET GridView 上，我有一个从数据库打印字符串的字段。此数据的范围可以从 10 到 100 个字符。当它比正常长时，该字段会自动换行数据，使该行比其他行占用更多的垂直空间。我想截断任何不适合该行的数据，然后在它旁边有一个“...”表示还有更多。我不需要让他们调整大小，我只是不想要任何不同高度的行。我希望这可以在客户端动态完成，用于 SEO 目的。

请参阅此处的 ActiveWIdgets 网格，并调整公司名称的大小，使其不适合。您会注意到它没有包装内容，而是完全按照我的意愿行事。

如何将此技术应用于 ASP.NET GridView？我假设涉及一些Javascript。如果这是真的，我宁愿不使用像 jQuery 这样的库（不要问为什么——我不允许为这个项目使用外部依赖项）。

4

2 回答 2

2

目录

  1. 问题说明
  2. 一种解决方案的插图

问题说明
将以下 HTML 复制到您的浏览器（至少 Firefox 和 Internet Explorer 7，但您也应该尝试 Opera）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div, td
        {
            width: 100px;
            border: solid 1px black;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        content content content content content content
    </div>
    <table cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    content content content content content content
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

请注意，该td元素不会隐藏溢出的内容。现在只有div元素知道如何做到这一点。Internet Explorer 的td元素甚至不知道如何停止包装内容。

严格来说，根据标准，td元素不支持white-space规则。和div元素th可以。

一种解决方案的说明
这是该问题的一种解决方案（在 Opera、Firefox 和 Internet Explorer 7 中测试）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        td
        {
            border: solid 1px black;
        }
        div
        {
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <div>
                        content content content content content content
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
于 2009-04-23T16:10:33.903 回答
0

如果您知道您的用户正在使用 Internet Explorer，则可以使用以下 IE 唯一 CSS：

td.nooverflow
{
  text-overflow:ellipsis;
}

然后为您要修复宽度的列设置 ItemStyle <ItemStyle CssClass='nooverfolow'/>（您需要使用 CSS 才能使其适合您的应用程序）

不幸的是，由于这只是 IE，对于其他浏览器，有一些黑客可用于模拟相同的事情：

于 2009-04-23T16:14:56.420 回答