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

ASP.NET GridViewでは、データベースから文字列を出力するフィールドがあります。このデータの範囲は10〜100文字です。通常より長くなると、フィールドでデータがラップされ、行が他の行よりも垂直方向のスペースが大きくなります。私はその行に収まらないデータを切り捨てて、その隣に "..."をつけてより多くのデータがあることを示します。私はそれらのサイズを変更することを許可する必要はありません、私はちょうど異なる高さの行をしたくないです。私はこれがSEOの目的のためにクライアント側で動的にできることを期待しています。ASP.NET GridView - 列のワードラップを防止する

ActiveWIdgets Grid hereを参照し、適合しないように会社名のサイズを変更してください。あなたはそれがコンテンツをラップしないことに気づくでしょうが、代わりに私がしたいことを正確に行います。

このテクニックをASP.NET GridViewにどのように適用できますか？私はいくつかのJavascriptが関係していると仮定します。それが本当であれば、私はになります。 jQueryのようなライブラリを使用することをお勧めします（理由は問いません - このプロジェクトに外部依存関係を使用することはできません）。内容の

出典

2009-04-23 Josh Stodola

表

問題のイラスト
イラストソリューション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要素は、コンテンツのラッピングを停止する方法を知らない。

厳密に言えば、standardによれば、td要素はwhite-spaceルールをサポートしていません。 divとthの要素があります。あなたは、ユーザーがInternet Explorerを使用している知っている場合は、

<!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-23 16:10:33 knut

動作しません。空白を防ぎますが、その後幅を無理に広げます。 max-widthを適用しても動作しません。幅を正確にするためにテキストを切り捨てる必要があります。 –

：1つの解決
の

イラストは、これは（オペラ、FirefoxとInternet Explorer 7でテスト済み）問題へソリューションです。次のIEのみを使用できます。

td.nooverflow { text-overflow:ellipsis; }

次に、幅を固定する列のItemStyleを次のように設定します。

： <ItemStyle CssClass='nooverfolow'/>だけで、他のブラウザのために、同じことをシミュレートするために利用できるいくつかのハッキングがあり、これはIEであるため、残念ながら

（あなたは右のあなたのアプリケーションのためにそれを得るためにCSSでプレーする必要があります）

Here's one for Firefox.

Here's another for Firefox

Here's one using jQuery

出典

2009-04-23 16:14:56 Keltex

これを試してみます。このようなクラス名を使用する代わりに、私はむしろこのセレクタを実行すると思います：#gridViewId td {} –

これが私の警告です。 – Keltex

動作しません。私はIE7を使用しています。私もホワイトスペースとの組み合わせでそれを試しました：nowrapとオーバーフロー：運がないと隠されています。 –

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

答えて

関連する問題