如何在Ag-Grid中实现自动换行时不拆分单词？

Ag-Grid 开启wrapText属性后默认的断行规则允许在单词任意位置拆分，只需覆盖默认文本样式即可解决，无需调整原有渲染逻辑。

方案1：单列配置（仅作用于指定列） #

直接在对应列的配置中添加cellStyle属性，自定义断行规则：

<AgGridColumn
  headerName={"reason"}
  field={"reason"}
  maxWidth={400}
  minWidth={200}
  wrapText={true}
  autoHeight={true}
  // 新增以下样式配置
  cellStyle={{
    wordBreak: 'keep-all',
    overflowWrap: 'break-word'
  }}
/>

• wordBreak: 'keep-all'：禁止在英文单词、中文字符内部随意断行，仅允许在空格、连字符等天然换行点处换行
• overflowWrap: 'break-word'：仅当整个单词完全放不下一行时，才会拆分单词，避免超长无空格内容溢出单元格，若不需要可删除该配置。

方案2：全局配置（作用于所有开启wrapText的列） #

如果有多列需要实现相同效果，可直接在全局CSS中覆盖Ag-Grid默认样式：

.ag-cell-wrap-text {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

该配置无需修改任何列配置代码，所有设置了wrapText={true}的列都会自动生效。

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