Question

使用angularjs UI网格，我增加了网格的rowHeight。我需要将文本包装在每个单元格中，并且需要摆脱文本翻转。

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网格环绕式文本

1 个答案: