代码之家 › 专栏 › 技术社区 › Josh Stodola

ASP.NET GridView-防止在列中换行

column-width gridview asp.net

Josh Stodola · 技术社区 · 16 年前

在ASP.NET网格视图中,我有一个字段可以打印数据库中的字符串。此数据可以从10到100个字符。当长度超过正常值时,字段字将数据包装起来,使行比其他行占用更多的垂直空间。我想截断任何不适合该行的数据,然后在它旁边放一个“…”来表示还有更多的数据。我不需要允许他们调整大小,我只是不想要任何不同高度的行。我希望这可以在客户端动态完成,以实现SEO目的。

见 ActiveWIdgets Grid here ,并调整公司名称的大小,使其不适合。您会注意到它不包装内容,而是完全按照我想做的做。

如何将此技术应用于ASP.NET网格视图?我假设涉及到一些javascript。如果是真的,我宁愿不是使用类似jquery的库(不要问为什么——不允许我为此项目使用外部依赖项)。

2 回复 | 直到 16 年前

knut 16 年前

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

问题说明
将以下HTML复制到浏览器中(至少是火狐和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 , the 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>

Keltex 16 年前

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

td.nooverflow
{
  text-overflow:ellipsis;
}

然后为要固定宽度的列设置itemstyle <ItemStyle CssClass='nooverfolow'/> (您需要使用CSS使其适合您的应用程序)

不幸的是,由于这只是IE,对于其他浏览器,有一些黑客可以模拟相同的东西:

推荐文章

Community wiki · 为什么使用DirectoryEntry对LDAP进行身份验证会间歇性地抛出COMException(0x8007203A):“服务器不可操作”?

1 年前

PixelScribe · 实体框架EDMX未更新ASP.NET web应用程序中的连接字符串

1 年前

Hua Deng · page_load中的调用方法导致adapter.fill()上出现StackOverflowException,但在其他地方调用时没有问题

1 年前

WingiM · REST API-如何实现具有相同名称但可接受参数类型不同的多个方法

1 年前

Community wiki · 基于两个参数在文本框中使用上下文键自动完成?

1 年前

NAM3L3SSRJ · 如何在C语言中创建一个方法或函数,在超市销售时减少数据库中的库存

2 年前

Javad A salehi · C#如何解析“MyValue”的动态值

2 年前

AlÄ±yev Rufet · 无法构造某些服务(验证服务描述符的服务类型时出错:Restaurant.Data.IAppRepository

2 年前

Geoff · 从Microsoft Identify Platform获取访问令牌

3 年前

Haim Ohayon · 这些链接之间有什么区别?

3 年前