0

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

こちらのActiveWIdgets Gridを参照して、会社名が収まらないようにサイズを変更してください。コンテンツをラップしていないことに気付くでしょうが、代わりに、私がやりたいことを正確に実行します。

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

4

2 に答える 2

2

目次

  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をサポートしていません。and要素が行いますwhite-space。divth

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>
于 2009-04-23T16:10:33.903 に答える
0

ユーザーが Internet Explorer を使用していることがわかっている場合は、次の IE 専用 CSS を使用できます。

td.nooverflow
{
  text-overflow:ellipsis;
}

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

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

于 2009-04-23T16:14:56.420 に答える