ASP.NET GridView - предотвращение переноса слов в столбце - PullRequest
Новая
       20

ASP.NET GridView - предотвращение переноса слов в столбце

0 голосов
/ 23 апреля 2009

В ASP.NET GridView у меня есть поле, которое печатает строку из базы данных. Эти данные могут содержать от 10 до 100 символов. Если оно длиннее обычного, поле переносит данные, в результате чего строка занимает больше места по вертикали, чем остальные. Я хочу обрезать любые данные, которые не помещаются в строку, а затем добавить «...», чтобы указать, что это еще не все. Мне не нужно позволять им изменять размер, я просто не хочу рядов разной высоты. Я надеюсь, что это может быть сделано динамически на стороне клиента, для целей SEO.

См. Таблицу ActiveWIdgets и измените размер названия компании, чтобы оно не подходило. Вы заметите, что он не переносит содержимое, а выполняет именно то, что я хочу.

Как применить этот метод к ASP.NET GridView? Я предполагаю, что некоторые Javascript вовлечены. Если это так, я бы предпочел НЕ использовать такую ​​библиотеку, как jQuery (не спрашивайте почему - мне не разрешено использовать внешние зависимости для этого проекта).

Ответы [ 2 ]

2 голосов
/ 23 апреля 2009

Содержание

  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>
0 голосов
/ 23 апреля 2009

Если вы знаете, что ваш пользователь использует Internet Explorer, вы можете использовать только следующий IE для CSS: 

td.nooverflow
{
  text-overflow:ellipsis;
}

Затем установите ItemStyle для столбца, ширину которого вы хотите зафиксировать, равным <ItemStyle CssClass='nooverfolow'/> (вам нужно поиграться с CSS, чтобы он соответствовал вашему приложению)

К сожалению, поскольку это только IE, для других браузеров есть несколько хаков, которые могут симулировать то же самое:

...