嘿，我之前也踩过这个坑！Angular UI Grid默认把单元格文本设成了不换行，不过有几个简单的方案能搞定，我给你分享下亲测有效的方法：

方法一：全局CSS设置（快速生效） #

如果希望所有单元格都支持自动换行，直接在你的全局样式文件里加这段CSS就行：

.ui-grid-cell-contents {
  white-space: normal !important;
  word-wrap: break-word;
  line-height: 1.4; /* 可选，调整行高让换行后的内容更易读 */
}

解释下：white-space: normal会取消默认的不换行设置，让文本自动换行；word-wrap: break-word能把过长的单词截断到下一行；加!important是为了覆盖UI Grid自带的white-space: nowrap样式。

方法二：针对特定列配置（更灵活） #

要是你只想让某几列实现换行，不想全局改动，可以给目标列指定自定义类：

首先在列定义里添加cellClass：

$scope.gridOptions = {
  columnDefs: [
    { 
      name: 'description', 
      displayName: '描述', 
      cellClass: 'wrap-content' 
    },
    // 其他列配置...
  ]
};

然后在CSS里给这个类加样式：

.wrap-content .ui-grid-cell-contents {
  white-space: normal !important;
  word-wrap: break-word;
}

这样只有标记了wrap-content的列会自动换行，其他列保持默认。

方法三：自定义单元格模板（复杂场景适用） #

如果单元格里有HTML内容，或者需要更个性化的布局，直接用自定义模板内嵌样式也可以：

{ 
  name: 'detail', 
  displayName: '详情', 
  cellTemplate: '<div class="ui-grid-cell-contents" style="white-space: normal; word-wrap: break-word;">{{COL_FIELD}}</div>'
}

这种方式适合单个列的特殊需求，不用额外写全局CSS。

小提示 #

如果换行效果不明显，检查下列宽是不是太窄了——可以给列设置width/minWidth，或者开启列宽调整：

$scope.gridOptions = {
  enableColumnResizing: true,
  // 其他配置...
};

这样用户可以手动拉宽列，更好地查看换行后的内容。

内容的提问来源于stack exchange，提问作者Murali V