UI-grid wrap-text in each cell [closed]

问题

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 12 months ago.

using angularjs UI-grid,i have increased the rowHeight of the gird. I need to wrap the text in each cell and i need to get rid of the text turnacation.

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

word wrap need to be done in name and description column.

回答1:

You need to remove

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

from

.ui-grid-cell-contents

and use 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' }
  ];

Plunker: http://plnkr.co/edit/6wDxSAfP8AE6zial4vhw?p=preview

来源：https://stackoverflow.com/questions/53866823/ui-grid-wrap-text-in-each-cell