2011-06-28 28 views
10

jqgridでは長いテキストがDBから取得されていますが、JQgridで表示中に折り返す必要がありますが、長いテキストを(スペースなしで)折り返す方法はありますか?複数の列を表示する必要があるため、受取人の名前欄に余裕があるのはわずか110ピクセルです。私たちのコードは次のようなものですjqgrid長いテキストの折り返し

{name:"firstPayeeName",index:"firstPayeeName", width:"110px", align:"left", sorttype:"string"}, 

Plsはあれば解決策を提供します。前もって感謝します。あなたが表示する必要がある試験の場合には

+2

行に 'white-space:normal!important;'スタイルを設定する必要があります。 [答え](http://stackoverflow.com/questions/2994343/how-to-implement-wordwrap-on-jqgrid-whichworks-on-ie7-ie8-and-ff/3006134#3006134)を見てください。列ヘッダーにテキストをラップする必要がある場合は、[ここ](http://stackoverflow.com/questions/3641400/problem-with-wrapping-jqgrid-column-headers-on-ie/3641561#3641561)を参照してください。 – Oleg

+0

これは、単語の間にスペースがある場合にのみ機能します。しかし、私はどんなスペースも持っていないし、言葉は長いです。 – Sabarish

答えて

29

あなたはherehereを説明したCSSスタイルを使用することはできません全くブランクやその他のホワイトスペースを持っていません。

私は別のCSSスタイルを使用して、あなたをお勧めします:

テキストは "testtesttesttesttesttesttesttesttest" は、次のように表示されますthe demoから見ることができますどのよう
<style type="text/css"> 
    .ui-jqgrid tr.jqgrow td { 
     word-wrap: break-word; /* IE 5.5+ and CSS3 */ 
     white-space: pre-wrap; /* CSS3 */ 
     white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
     white-space: -pre-wrap; /* Opera 4-6 */ 
     white-space: -o-pre-wrap; /* Opera 7 */ 
     overflow: hidden; 
     height: auto; 
     vertical-align: middle; 
     padding-top: 3px; 
     padding-bottom: 3px 
    } 
</style> 

溶液上の

enter image description here

+0

ビューモデルダイアログで単語の折り返しを行う方法はありますか?私は自分のフィールドに長いテキストがあるので。ビューをクリックすると、スクロールバーのポップアップが表示されます。私はそれを望んでいない。私はそこにラップアラウンドしたい... –

+0

@CJRamki:多くのオプションがあります。 [回答](http://stackoverflow.com/a/8171924/315935)では、使用できる主なCSSルールが示されています。あなたは[ここ](http://stackoverflow.com/a/8378666/315935)のような 'max-height'ルールと組み合わせることができます。 – Oleg

1

私のために働いていない、exacltyはそのままですが、ほとんど修正はありませんでした! テーマ/ ui.jqgrid.cssに行く: 検索用:.ui-jqgrid tr.jqgrow TD: とブラケットには、挿入:

word-wrap: break-word; // IE 5.5+ and CSS3 
     white-space: pre-wrap; // CSS3 
     white-space: -moz-pre-wrap; // Mozilla, since 1999 
     white-space: -pre-wrap; // Opera 4-6 
     white-space: -o-pre-wrap; // Opera 7 
     overflow: hidden; 
     height: auto; 
     vertical-align: middle; 
     padding-top: 3px; 
     padding-bottom: 3px 
+0

これはあなたのhtmlのスタイルシートの_order_のためですか?あなたのスタイルが何もしなかった場合、**あなたのカスタムスタイルを**の前に 'ui.jqgrid.css'へのあなたのリンクのように思えます。 –

+0

今はかなり覚えていません。私はjqridのために自分のスタイルを定義しました!多分この命令に影響を与えました!スコッティに感謝! – Paschalis

1
.ui-jqgrid tr.jqgrow td 
{   
    word-wrap: break-word; /* IE 5.5+ and CSS3 */ 
    white-space: pre-wrap; /* CSS3 */ 
    white-space: -pre-wrap; /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    white-space: normal !important; 
    height: auto; 
    vertical-align: text-top; 
    padding-top: 2px; 
    padding-bottom: 3px; 
} 

使用上のコードその作業を。スペースを与えないと行も破損します

関連する問題