jqgrid длинная текстовая упаковка - PullRequest
Новая
       41

jqgrid длинная текстовая упаковка

11 голосов
/ 28 июня 2011

В jqgrid у нас есть длинный текст, получаемый из БД, но нужно оборачивать при отображении в JQgrid, есть ли способ обернуть длинный текст (без пробелов)? У нас есть только 110px, чтобы сэкономить для поля имени получателя, потому что у нас есть несколько столбцов, которые должны отображаться. Наш код похож на 

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

Просьба предоставить решение, если таковые имеются. Заранее спасибо.

Ответы [ 3 ]

30 голосов
/ 02 августа 2011

В случае теста, который вам нужно отобразить, есть без пробелов или других пробелов вы не можете использовать описанный стиль 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

1 голос
/ 20 мая 2013 
.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 голос
/ 10 июля 2012

Вышеупомянутое решение не сработало для меня, точно, как есть, но с небольшими изменениями сделал!Зайдите в 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
...