CODEWITHSUNDEEP
javascriptreactjsreactstrap
lalala hey
lalala hey

Reputation: 11

Wrap text failed inside a table and grid container

Here is my code i wanna break the text once it beyond the <Grid item xs={12} sm={9} zeroMinWidth style={{ wordWrap: 'break-word' }}> and the wordWrap: 'break-word' does not work.

<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>

enter image description here I expect if the text goes beyond the the grid or <div style={{ wordWrap: 'break-word' }}> then the text will be broken and wrapped to next line so the paragraph will be extended vertically.

Added whiteSpace property Added whiteSpace property

Upvotes: -1

Views: 84

Answers (1)

Shahriar Rumel
Shahriar Rumel

Reputation: 1

If I understand correctly, you are trying to break lines when it exceeds the td width. So, what you should be looking for is whitespace property.

To wrap paragraph you can just use

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

Thanks.

Upvotes: 0

Related Questions