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

【问题标题】：Wrap Text in ng-grid Cell Template?在 ng-grid 单元格模板中包装文本？
【发布时间】：2018-04-04 07:00:02
【问题描述】：

我有一些文字显示如下：

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 可以进行文本换行，但我不确定如何将其与我上面的语句结合起来。如果有人可以提供帮助，那就太好了。

谢谢！

【问题讨论】：

我不明白。请告诉我们你的变量是如何在你的 js 中声明的。
ng-grid 中的 width 定义了列的宽度。因此，您希望您的列占据可用网格宽度的 20%。它不会对单元格内容（我知道）做任何事情，即导致它们换行。

标签： css angularjs ng-grid word-wrap celltemplate

【解决方案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 */

【讨论】：