css - 在 ng-grid 单元格模板中包装文本？

Question

我有一些文本显示如下:

columnDefs: [
field: "text", displayName: 'Text', width:'20%',
    cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-repeat = "text in COL_FIELD" ng-cell-text>{{text.name}}{{$last ? "" : ", "}}</span></div>'}
]

它基本上循环遍历我在 .js 文件中声明的“文本”变量数组，并显示单元格中的内容。有没有一种方法可以环绕文本，使其环绕我提供的 20% 宽度？我知道 style="white-space: normal 可以进行文本换行，但我不确定如何将其与我上面的语句集成。如果有人可以提供帮助，那就太好了。

谢谢!

Answer 1

您应该能够在单元格中输入所需的数据，然后使用以下 CSS 代码将允许文本在网格单元格中换行。

/* CSS to allow text wrapping */
.ui-grid-viewport .ui-grid-cell-contents {
  word-wrap: break-word;
  white-space: normal !important;
}

.ui-grid-row, .ui-grid-cell {
  height: auto !important;
}

.ui-grid-row div[role=row] {
  display: flex ;
  align-content: stretch;
}
/* End of CSS to allow text wrapping */