在表格和网格容器内换行文本失败

Question

这是我的代码，我想在文本超出 和 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>

我希望如果文本超出网格或

那么文本将被破坏并换行到下一行，因此该段落将垂直延伸。

如果我理解正确，当它超过 td 宽度时，您会尝试换行。 那么，您应该寻找什么空白属性。

要换行段落，您可以使用

<td style={{ whiteSpace: 'pre-line' }}>
    <JSONPretty id="json-pretty" data={item.body}></JSONPretty>
</td>

谢谢。

Answer 1

如果我理解正确，当它超过 td 宽度时，您会尝试换行。 那么，您应该寻找什么空白属性。

要换行段落，您可以使用

<td style={{ whiteSpace: 'pre-line' }}>
    <JSONPretty id="json-pretty" data={item.body}></JSONPretty>
</td>

谢谢。