web-dev-qa-db-ja.com

jqgridの長いテキストの折り返し

Jqgridでは、DBから長いテキストを取得していますが、JQgridでの表示中に折り返す必要があります。長いテキストを（スペースなしで）折り返す方法はありますか？複数の列を表示する必要があるため、受取人名フィールド用に110pxしかありません。私たちのコードは

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

Plsは、もしあれば解決策を提供します。前もって感謝します。

textjqgridword-wrap
11
Sabarish

表示する必要のあるテストに空白やその他の空白がない場合は、説明されているCSSスタイルを使用できません ここ および ここ 。

別のCSSスタイルを使用することをお勧めします。

<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>

デモ からの見方テキスト「testtesttesttesttesttesttesttesttest」は次のように表示されます。

enter image description here

32
Oleg

上記の解決策は、まったくそのままでは機能しませんでしたが、ほとんど変更を加えることなく機能しました。 themes/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
1
Paschalis
.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;
}

上記のコードを使用して動作します。あなたがスペースを与えないならば、それはまた線を壊します

1
user2400795