ASP.NET GridView - 防止列中的自动换行

发布于 2024-07-17 13:33:24 字数 495 浏览 8 评论 0原文

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

请参阅ActiveWIdgets 网格，然后调整公司名称的大小，使其不适合。您会注意到它没有包装内容，但它恰恰做了我想做的事情。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮光沉寂 2024-07-24 13:33:24

问题说明
一个解决方案说明

问题说明
将以下 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>

Table of contents

Illustration of problem
Illustration of one solution

Illustration of problem
Copy the following HTML into your browsers (at least Firefox and Internet Explorer 7, but you should try Opera too):

<!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>

Notice that the td element does not hide the overflowing content. Only the div element nows how to do this. Internet Explorer's td element does not even know how to stop wrapping the content.

Strictly speaking, according to the standard, the td element does not support the white-space rule. The div and th elements do.

Illustration of one solution
This is one solution to the problem (Tested in Opera, Firefox and 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>

回复收藏 0 原文

坏尐絯 2024-07-24 13:33:24

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

td.nooverflow
{
  text-overflow:ellipsis;
}

然后将要固定宽度的列的 ItemStyle 设置为 （您需要使用 CSS 才能使其适合您的应用程序）

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

If you know your user is using Internet Explorer, you can use the following IE only CSS:

td.nooverflow
{
  text-overflow:ellipsis;
}

Then set the ItemStyle for the column you want to fix the width of as <ItemStyle CssClass='nooverfolow'/> (you'll need to play with the CSS to get it right for your application)

Unfortunately since this is IE only, for other browsers, there are some hacks available to simulate the same thing:

回复收藏 0 原文

~没有更多了~