ASP.NET GridView - 列内のワードラップを防止する

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

  •  13-09-2019
  •  | 
  •  

質問

ASP.NET GridView には、データベースから文字列を出力するフィールドがあります。このデータの範囲は 10 ～ 100 文字です。通常よりも長い場合、フィールドはデータをワードラップし、その行が他の行よりも多くの垂直方向のスペースを占めるようになります。行に収まらないデータを切り捨て、その横に「...」を表示して、さらにデータがあることを示したいと考えています。サイズ変更を許可する必要はありません。高さの異なる行を入れたくないだけです。SEOの目的で、これをクライアント側で動的に実行できることを願っています。

を参照してください。 ActiveWIdgets グリッドはこちら, 、会社名が収まらないようにサイズを変更します。内容をラップしているのではなく、私がやりたいことを正確に実行していることがわかります。

このテクニックを ASP.NET GridView に適用するにはどうすればよいですか?JavaScript が関係していると思われます。それが本当なら、私はそうしたいです ない jQuery のようなライブラリを使用します (理由は聞かないでください -- このプロジェクトでは外部依存関係を使用することは許可されていません)。

役に立ちましたか？

解決

目次

  1. 問題のイラスト
  2. 1 つのソリューションの図

問題のイラスト
次の 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 要素はそうします。

1 つのソリューションの図
これは 1つ 問題の解決策 (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 を使用していることがわかっている場合は、次の IE 専用 CSS を使用できます。

td.nooverflow
{
  text-overflow:ellipsis;
}

次に、幅を固定したい列のItemStyleを次のように設定します。 <ItemStyle CssClass='nooverfolow'/> (アプリケーションに合わせて CSS を調整する必要があります)

残念ながら、これは IE のみであるため、他のブラウザでも同じことをシミュレートするために利用できるハックがいくつかあります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top