Question

在ASP.NET GridView上，我有一个字段，用于从数据库中输出字符串。此数据的范围为10到100个字符。当它比正常情况长时，字段包装数据，使得该行占用的空间比其他行更多。我想截断任何不适合行的数据，然后在它旁边有一个“...”表示还有更多。我不需要让它们调整大小，我只是不想要任何不同高度的行。我希望这可以在客户端动态完成，用于搜索引擎优化目的。

请参阅ActiveWIdgets Grid here，并调整公司名称以使其不适合。您会注意到它没有包装内容，但它确实完全符合我的要求。

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

Answer 1

问题说明
一种解决方案的说明

问题说明
将以下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元素甚至不知道如何停止包装内容。

严格地说，根据standard，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>

Answer 2

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

td.nooverflow
{
  text-overflow:ellipsis;
}

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

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

ASP.NET GridView - 防止在Word中进行Word-Wrapping

2 个答案: