UI-每个单元格中的网格换行文本

Question

使用angularjs ui-网格，我增加了网格的行高。我需要将每个单元格中的文本换行，我需要摆脱文本截断。

example http://plnkr.co/edit/9aoV9rkjf9eKpTjcAaC5?p=preview

名称和描述栏需要自动换行。

Answer 1

您需要删除

 -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;

来自

.ui-grid-cell-contents

并使用word-break: break-all;

.ui-grid-cell-contents {
  padding: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  word-break: break-all;
  overflow: hidden;
  height: 100%;
}

main.css:

.grid {
  width: 100%;
  height: 400px;
}
.ui-grid-cell-contents-break {
   padding: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;


  overflow: hidden;
  height: 100%;

  word-break: break-all;
}

app.js:

$scope.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'description',cellTemplate:'<div class="ui-grid-cell-contents-break"> This is the test Description</div>'},
    { name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
    { name: 'address.city' }
  ];

笨蛋：http://plnkr.co/edit/6wDxSAfP8AE6zial4vhw?p=preview

UI-每个单元格中的网格换行文本

UI-grid wrap-text in each cell

word-wrap

angularjs

ui-grid