ASP.NET GridView - Предотвратяване на пренасяне на думи в колона

В ASP.NET GridView имам поле, което отпечатва низ от базата данни. Тези данни могат да варират от 10 до 100 знака. Когато е по-дълго от нормалното, полето обвива данните, като прави реда да заема повече вертикално пространство от останалите. Искам да съкратя всички данни, които не се побират в реда, и след това да поставя "..." до тях, за да покажа, че има още. Не е нужно да им позволявам да преоразмеряват, просто не искам редове с различна височина. Надявам се, че това може да се направи динамично от страна на клиента, за целите на SEO.

Вижте решетката на ActiveWIdgets тук и преоразмерете името на компанията, така че да не се побира. Ще забележите, че не обвива съдържанието, а вместо това прави точно това, което искам да направя.

Как мога да приложа тази техника към ASP.NET GridView? Предполагам, че е включен някакъв Javascript. Ако това е вярно, бих предпочел да НЕ използвам библиотека като jQuery (не питайте защо - не ми е позволено да използвам външна зависимост за този проект).


gridview asp.net column-width
person Josh Stodola    schedule 23.04.2009    source източник

Отговори (2)


arrow_upward
2
arrow_downward

Съдържание

  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 вече знае как да направите това. Елементът td на Internet Explorer дори не знае как да спре обвиването на съдържанието.

Строго погледнато, според стандарта, Елементът 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>
person knut    schedule 23.04.2009
comment
Не работи. Предотвратява бялото пространство, но след това разширява нелепо ширината. Прилагането на max-width също не работи. Трябва ми, за да съкратя текста, за да направя ширината правилна. - person Josh Stodola; 23.04.2009

arrow_upward
0
arrow_downward

Ако знаете, че вашият потребител използва Internet Explorer, можете да използвате следния CSS само за IE:

td.nooverflow
{
  text-overflow:ellipsis;
}

След това задайте ItemStyle за колоната, чиято ширина искате да коригирате, като <ItemStyle CssClass='nooverfolow'/> (ще трябва да си поиграете с CSS, за да го направите правилно за вашето приложение)

За съжаление, тъй като това е само за IE, за други браузъри има някои налични хакове за симулиране на същото нещо:

person Keltex    schedule 23.04.2009
comment
Ще опитам това. Въпреки че вместо да използвам име на клас като това, мисля, че бих предпочел да направя този селектор: #gridViewId td { } - person Josh Stodola; 23.04.2009
comment
Не работи. Използвам IE7. Опитах го и в комбинация с white-space:nowrap и overflow:hidden без успех. - person Josh Stodola; 23.04.2009
comment
Работи при прилагане на table-layout:fixed към таг ‹table›, но тогава моите колони са с еднаква ширина. Сега ще се опитам да го поправя. - person Josh Stodola; 24.04.2009