AG Grid开启wrapText属性后如何实现在空格处进行文本断行？

你遇到的单词中间强制换行问题，原因是AG Grid单元格默认的word-break CSS属性值为break-all，该规则允许在任意字符位置断行，即使存在可用空格断行点也会优先占满单元格宽度。

你可以选择以下两种方案实现仅在空格处优先断行： #

方案1：单列针对性配置（推荐） #

如果仅需要content列生效，直接在现有列配置中增加cellStyle属性即可，修改后的代码如下：

<AgGridColumn
   headerName={'content'}
   editable={true}
   field="content"
   flex={1}
   wrapText={true}
   autoHeight={true}
   cellStyle={{
     wordBreak: 'break-word'
   }}
/>

方案2：全局统一配置 #

如果需要所有开启换行的列都生效，给AG Grid容器添加自定义样式类后增加如下CSS规则即可：

/* 假设你给AgGridReact组件加了custom-ag-grid类名 */
.custom-ag-grid .ag-cell-wrap-text {
  word-break: break-word !important;
}

word-break: break-word规则会优先选择空格、连字符等天然断行点换行，只有当单个连续无空格的字符串长度超过单元格宽度时，才会触发字符间断行，完全符合需求。

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