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

StackOverflow https://stackoverflow.com/questions/782428

  •  13-09-2019
  •  | 
  •  

Вопрос

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

Смотрите на Сетка ActiveWidgets здесь, и измените размер названия компании так, чтобы оно не помещалось.Вы заметите, что он не переносит содержимое, но вместо этого делает именно то, что я хочу сделать.

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

Это было полезно?

Решение

Содержание

  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 элемент показывает, как это сделать.Браузер 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>

Другие советы

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

td.nooverflow
{
  text-overflow:ellipsis;
}

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top