剣道のグリッドにテキストを折り返す方法

私は剣道のグリッドを持っています。私の問題は、テキストが長すぎるとテキストを破ることができないときです。私はCSSを作成しようとしましたが、うまくいきません。剣道のグリッドにテキストを折り返す方法

が、おかげで私を助けてください：

#projectslistgrid .k-grid-content td{ 
    word-wrap:break-word; 
}

これはイメージです：はここに私のCSSです。

出典

2016-04-22 Minh Toan

次のコードスニペットを試してください。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css" /> 

    <script src="https://kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script> 
    <script src="https://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script> 
    <style> 
     .breakWord120 { 
      /*max-width: 120px !important;*/ 
      word-break: break-all !important; 
      word-wrap: break-word !important; 
      /*vertical-align: top; 
      line-height: 15px;*/ 
     } 
    </style> 
</head> 
<body> 


    <div id="example"> 
     <div id="grid"></div> 

     <script> 

      var products = [{ 
       ProductID: 1, 
       ProductName: "Chai", 
       SupplierID: 1, 
       CategoryID: 1, 
       QuantityPerUnit: "10 boxes x 20 bags", 
       UnitPrice: 18.0000, 
       UnitsInStock: 39, 
       UnitsOnOrder: 0, 
       ReorderLevel: 10, 
       Discontinued: false, 
       Category: { 
        CategoryID: 1, 
        CategoryName: "Beverages", 
        Description: "Soft drinks, coffees, teas, beers, and ales" 
       } 
      }, { 
       ProductID: 2, 
       ProductName: "Chang", 
       SupplierID: 1, 
       CategoryID: 1, 
       QuantityPerUnit: "24 - 12 oz bottles", 
       UnitPrice: 19.0000, 
       UnitsInStock: 17, 
       UnitsOnOrder: 40, 
       ReorderLevel: 25, 
       Discontinued: false, 
       Category: { 
        CategoryID: 1, 
        CategoryName: "Beverages", 
        Description: "Soft drinks, coffees, teas, beers, and ales" 
       } 
      }, { 
       ProductID: 3, 
       ProductName: "AniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrup", 
       SupplierID: 1, 
       CategoryID: 2, 
       QuantityPerUnit: "12 - 550 ml bottles", 
       UnitPrice: 10.0000, 
       UnitsInStock: 13, 
       UnitsOnOrder: 70, 
       ReorderLevel: 25, 
       Discontinued: false, 
       Category: { 
        CategoryID: 2, 
        CategoryName: "Condiments", 
        Description: "Sweet and savory sauces, relishes, spreads, and seasonings" 
       } 
      }]; 

      $(document).ready(function() { 
       $("#grid").kendoGrid({ 
        dataSource: { 
         data: products, 
         schema: { 
          model: { 
           fields: { 
            ProductName: { type: "string" }, 
            UnitPrice: { type: "number" }, 
            UnitsInStock: { type: "number" }, 
            Discontinued: { type: "boolean" } 
           } 
          } 
         }, 
         pageSize: 20 
        }, 
        height: 550, 
        scrollable: true, 
        sortable: true, 
        filterable: true, 
        pageable: { 
         input: true, 
         numeric: false 
        }, 
        columns: [ 
         { 
          field: "ProductName", title: "ProductName", attributes: { 
           "class": "breakWord120", 

          } 
         }, 
         { field: "UnitPrice", title: "Unit Price", format: "{0:c}" }, 
         { field: "UnitsInStock", title: "Units In Stock" }, 
         { field: "Discontinued" } 
        ] 
       }); 
      }); 
     </script> 
    </div> 


</body> 
</html>

ご懸念があれば教えてください。

出典

2016-04-22 12:53:20

元の質問者に何が起こったのか分かりませんが、これは私にとっては同様の問題を解決するために完璧に機能しました。ありがとうございました！ –

剣道のグリッドにテキストを折り返す方法

答えて

関連する問題