I have created 5 columns for storing some data, but when the text inside one column is too long, the width will be changed.

Expect: The word will wrap to next line and each column width should stay the same.

https://playcode.io/1017243

CodePudding user response：

First you need set static width that you want.

width: '100px'

Then you just need break word property.

overflowWrap: 'break-word'

Should work as expected.

CodePudding user response：

you need to set a max-width or maxWidth for your columns.
e.g:

style={{maxWidth: 100}}

CodePudding user response：

  style={{
              backgroundColor: 'navy',
              width: '100%',
              display: 'flex',
              whiteSpace: 'pre-wrap',
              overflowWrap: 'break-word'
            }}