How to prevent word break on new line in Ag grid?

Question

I use wrapText and autoHeight properties in Ag-Grid to move to a new line if the text does not fit into the cell. But the problem is that the Ag grid sometimes breaks words instead of moving it to a new line. I tried everything, wrote my own cell renders, tried different scripts, even tried to write my own template for the table. Nothing helped.

<AgGridColumn
  headerName={"reason"}
  field="reason"
  maxWidth={400}
  minWidth={200}
  wrapText={true}
  autoHeight={true}
/>

Photo of word break

Maybe someone knows what can be done to make a new line without breaking words?

Answer 1

You also need to set the cell style for the word-break css property to be 'normal' inside the AgGridColumn element

<AgGridColumn
  headerName={"reason"}
  field="reason"
  maxWidth={400}
  minWidth={200}
  wrapText={true}
  autoHeight={true}
  cellStyle={{wordBreak: 'normal'}}
/>

Answer 2

cellStyle worked for me.

Include this in your ColDef:

{
    wrapText: true,
    autoHeight: true,
    cellStyle: { wordBreak: 'normal' },
}