在 ASP.NET GridView 上，我有一个从数据库打印字符串的字段。此数据的范围可以从 10 到 100 个字符。当它比正常长时，该字段会自动换行数据，使该行比其他行占用更多的垂直空间。我想截断任何不适合该行的数据，然后在它旁边有一个“...”表示还有更多。我不需要让他们调整大小，我只是不想要任何不同高度的行。我希望这可以在客户端动态完成，用于 SEO 目的。
查看ActiveWIdgets Grid here，并调整公司名称的大小，使其不适合。您会注意到它没有包装内容，而是完全按照我的意愿行事。
如何将此技术应用于 ASP.NET GridView？我假设涉及一些Javascript。如果这是真的，我宁愿不使用像 jQuery 这样的库（不要问为什么——我不允许为这个项目使用外部依赖项）。
【问题讨论】：
标签： asp.net gridview column-width
目录
问题说明
将以下 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>
【讨论】：
如果您知道您的用户正在使用 Internet Explorer，则可以使用以下仅适用于 IE 的 CSS：
td.nooverflow
{
text-overflow:ellipsis;
}
然后将您想要固定宽度的列的 ItemStyle 设置为 <ItemStyle CssClass='nooverfolow'/>（您需要使用 CSS 来使其适合您的应用程序）
不幸的是，由于这只是 IE，对于其他浏览器，有一些黑客可用于模拟相同的事情：
【讨论】：