表格与Grid容器内文本换行失效问题求助

我设置了wordWrap: 'break-word'属性，但当文本超出<Grid item xs={12} sm={9} zeroMinWidth style={{ wordWrap: 'break-word' }}>的范围时，无法自动换行。期望文本超出范围后能自动换行并向下延伸。

现有代码 #

<Table striped style={{ tableLayout: 'fixed', wordWrap: 'break-word', overflowX: "auto" }}>
    <thead style={{height: "45px"}}>
        <tr>
            <Grid container >
                <Grid item xs={12} sm={3}>
                    <th style={{ width: '23%' }}>name</th>
                </Grid>
                <Grid item xs={12} sm={9} >
                    <th>information</th>
                </Grid>
            </Grid>
        </tr>
    </thead>
    <tbody >
        {Items.map((item, index) => (
            <tr>
                <Grid container >
                    <Grid item xs={12} sm={3}>
                        <td >
                            <p style={{fontWeight: 'bold'}}>abc</p>
                        </td>
                    </Grid>
                    <Grid item xs={12} sm={9} zeroMinWidth style={{ wordWrap: 'break-word' }}>
                        <div style={{ wordWrap: 'break-word' }}>
                            <td style={{ wordWrap: 'break-word' }}>
                                <JSONPretty id="json-pretty" data={item.body}></JSONPretty>
                            </td>
                        </div>
                    </Grid>
                </Grid>
            </tr>
        ))}
    </tbody>
</Table>

问题效果 #

已尝试操作 #

已尝试添加whiteSpace属性，效果如下：

解决方案 #

以下几个调整可以解决该问题：

• 给表格单元格设置明确宽度：由于Table启用了tableLayout: fixed，需给对应<td>设置与表头匹配的宽度（如信息列设为77%），让容器有明确的宽度约束，触发换行规则。
• 使用标准换行属性：用overflowWrap: 'break-word'（wordWrap的标准别名）搭配whiteSpace: 'pre-wrap'，确保长文本、包含空格或换行的内容能正常换行。
• 修正HTML结构：避免在Grid中嵌套<td>，应将Grid放在<td>内部，符合HTML语义，减少样式冲突。
• 给JSONPretty组件添加样式：JSONPretty渲染的内容可能自带不换行样式，需给组件本身添加强制换行规则。

修改后的核心代码 #

<Table striped style={{ tableLayout: 'fixed', overflowX: "auto" }}>
    <thead style={{height: "45px"}}>
        <tr>
            <th style={{ width: '23%' }}>name</th>
            <th style={{ width: '77%' }}>information</th>
        </tr>
    </thead>
    <tbody>
        {Items.map((item, index) => (
            <tr key={index}>
                <td style={{ width: '23%' }}>
                    <Grid container>
                        <Grid item xs={12}>
                            <p style={{fontWeight: 'bold'}}>abc</p>
                        </Grid>
                    </Grid>
                </td>
                <td style={{ 
                    width: '77%',
                    overflowWrap: 'break-word',
                    whiteSpace: 'pre-wrap'
                }}>
                    <Grid container>
                        <Grid item xs={12} zeroMinWidth>
                            <JSONPretty 
                                id="json-pretty" 
                                data={item.body}
                                style={{ overflowWrap: 'break-word', whiteSpace: 'pre-wrap' }}
                            />
                        </Grid>
                    </Grid>
                </td>
            </tr>
        ))}
    </tbody>
</Table>

调整后，文本会在单元格宽度范围内自动换行，包括长单词或JSON格式的内容。

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