JQuery положить перерыв в линии, которая находится вне экрана

я получил некоторый длинный текст, отображаемый в столбце сетки JQuery, как «1 2 3 4 5 6 7 8 9 10»JQuery положить перерыв в линии, которая находится вне экрана

После концов экрана «8» и не показывает «9 10»

есть ли способ поставить какой-то динамический разрыв там, поэтому было бы показать, как

1 2 3 4 5 6 7 8 
9 10

Код:

@model PhonebookSB.Controllers.HomeController.getinform 

<html style="height:100%"> 
<body lang="RU" style="height:100%" > 
     <style> 
     A { 
      color: #000; 
     } 

     html, body { 
      height: 95%; 
     } 
    </style> 

    <script type="text/javascript"> 
    jQuery(document).ready(function() { 
     infoName = '@Model.infoName'; 
     $('#grid').jqGrid({ 
      hidegrid: false, 
      url: "/Home/GetInfo/" + @Model.infoIdOut, page: 1, 
      datatype: 'json', 
      jsonReader: { 
       repeatitems: false 
      }, 
      mtype: 'GET', 
      afterInsertRow: function (rowid, aData) { 
      }, 
      colNames: ['infoid', infoName], 
      colModel: [ 
       { name: 'infoId', index: 'infoId', hidden: true, sortable: false }, 
       { name: 'infoText', align: 'left', sortable: false, hidden: false} 
      ], 
      height: '100%', 
      rowNum: 1, 
      viewrecords: true, 
      subGridOptions: { 
       openicon: "ui-helper-hidden" 
      }, 
      loadComplete: function() { 
       gridId = ("grid"); 
       gridWidth = $('#gbox_' + gridId).parent().width(); 
       gridHeight = $(window).innerHeight(); 
       $('#' + gridId).jqGrid('setGridWidth', gridWidth); 
       $('#' + gridId).jqGrid('setGridHeight', gridHeight); 

       gridId = "tree"; 
       gridHeight = $(window).innerHeight(); 

       $('#' + gridId).jqGrid('setGridHeight', gridHeight); 
      } 
     }); 

     $('#tree').jqGrid({ 
      url: '/Home/infoTree/', 
      mtype: 'GET', 
      treeGrid: true, 
      treeGridModel: 'adjacency', 
      ExpandColumn: 'infoName', 
      ExpandColClick: true, 
      treedatatype: 'json', 
      datatype: 'json', 
      colNames: ['infoId', 'infoName'], 
      colModel: [ 
         { name: 'infoId', index: 'infoId', hidden: true, sortable: false }, 
         { name: 'infoName', index: 'infoName', hidden: false, sortable: false } 
      ], 
      onSelectRow: function (ids) { 
       if (ids != null) { 
        data = jQuery('#tree').getRowData(ids); 
        jQuery("#grid").setGridParam({ url: "/Home/GetInfo/" + ids }) 
         .trigger('reloadGrid'); 
       } 
      }, 
      caption: '' 
     }); 

     $("#grid").jqGrid("hideCol", "subgrid"); 
     gridId = "grid"; 
     gridWidth = $('#gbox_' + gridId).parent().width(); 

     $('#' + gridId).jqGrid('setGridWidth', gridWidth); 

     gridHeight = $(window).innerHeight(); 
     $('#' + gridId).jqGrid('setGridHeight', gridHeight); 

     gridId = "tree"; 
     gridWidth = $('#gbox_' + gridId).parent().width(); 

     $('#' + gridId).jqGrid('setGridWidth', gridWidth); 
     gridHeight = $(window).innerHeight(); 

     $('#' + gridId).jqGrid('setGridHeight', gridHeight); 
     $('#' + gridId).closest("div.ui-jqgrid-view") 
      .children("div.ui-jqgrid-hdiv") 
      .hide(); 
    }); 
</script> 

<div class="span3" style="font-size: 12.0pt"> 
      <div class="specialtree" style="height:100%; width: 100%"> 
       <table id="tree" style="height:100%; width: 100%"></table> 
      </div> 
    </div> 
     <div class="row-fluid"> 
      <div class="span9"> 
       <table id="grid" style="height:100%; width: 100%; word-break:break-all"></table> 
      </div></div> 
</body> 
</html>

источник

2014-11-05 AHTOH Polsky

Сделайте ширину таблицы равной ширине экрана (100%), а затем используйте слово break: break-word. – dfsq

Сделайте скрипку или поместите свой код здесь, это поможет нам в ответе, это может быть сделано css, но если вы поместите свой код или скрипку, тогда это станет более понятным. – bharatpatel

нет слома-паузы: брейк-слот, только брейк-слот, я пытался его использовать, но он все еще пытается разобрать все как одну строку, независимо от того, что для этого недостаточно места ... –

Я не мог найти подходящий способ разделения столбца jqGrid, но вы можете попробовать переполнение для отображения вашего результата. Это наиболее используемый и правильный способ отображения большого количества столбцов, потому что число столбцов может быть 10 или более 10.

<div style="overflow:auto;width:100px"> 
 
    <table> 
 
    <tr> 
 
     <td>1</td>  <td>1</td>  <td>1</td>  <td>1</td> 
 
     <td>1</td>  <td>1</td>  <td>1</td>  <td>1</td> 
 
     <td>1</td>  <td>1</td>  
 
    </tr> 
 
    </table> 
 
</div>

Проверить этот учебник для более подробной информации о переполнении. http://www.w3schools.com/cssref/pr_pos_overflow.asp

источник

2014-11-05 13:07:59 bharatpatel

Я почти решил проблему сделав , теперь я получил весь текст на экране, но он начал спреды слов в середине .. –

@AHTOHPolsky перерыв слово нарушит слово где он найдет место. поэтому я предлагаю вам использовать переполнение. используя это, вы можете исправить ширину экрана для отображения данных, и если будут найдены большие данные, автоматически активируется полоса прокрутки. проверьте это для получения дополнительной информации: http://www.w3schools.com/cssref/pr_pos_overflow.asp – bharatpatel

JQuery положить перерыв в линии, которая находится вне экрана

ответ

Смежные вопросы