如何在反应中以固定宽度的列显示数据

【问题标题】：How to display data in fixed width column in react如何在反应中以固定宽度的列显示数据
【发布时间】：2022-11-22 19:31:28
【问题描述】：

我创建了5列用于存储一些数据，但是当一列中的文本太长时，宽度就会改变。

期望：单词将换行到下一行，每列宽度应保持不变。

https://playcode.io/1017243

【问题讨论】：

标签： reactjs

【解决方案1】：

首先你需要设置你想要的静态宽度。

width: '100px'

然后你只需要中断词属性。

overflowWrap: 'break-word'

应该按预期工作。

【讨论】：

但是如果它给static增加了宽度，那5列怎么能以相同的宽度填满整个屏幕呢？喜欢playcode.io/1017243

【解决方案2】：

您需要为您的列设置 max-width 或 maxWidth。
例如：

style={{maxWidth: 100}}

【讨论】：

【解决方案3】：

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

【讨论】：