CODEWITHSUNDEEP
reactjs
louay baccary
louay baccary

Reputation: 51

React js text don't fit in the screen

I'm working on a reactJS web app . I get a value from the server , and i want to display it inside a grid item , but the problem is that the value is a long text,the value in my code is {signature} , and when it is displayed it does not fit the screen . This is my try

  <Paper className={classes.paper}>
 <Grid container spacing={3} wrap="wrap">  
  <Grid  item xs  > 
              Your Signature:        
              <div style={{ flexWrap:'wrap' }}>
              {signature}
              </div>
            </Grid>
          </Grid>
        </Paper>
        <Copyright />

This is a screenshot of the result : enter image description here

Upvotes: 0

Views: 1658

Answers (2)

Jake B.
Jake B.

Reputation: 444

You can wrap a long string with no spaces by using word-wrap css property with break-word value. Below is an example using HTML with CSS.

For React style; adapt the below css property to use camel case.

.wrap{
  width: 200px;
   word-wrap:break-word;
}
<div class="wrap">
  oisphfpashdfpiahusdfpiuhapsiduhfpiuasdhfpiuahsdfpihaspiduhfpiasdhfpiuhasdpifuhapisduhfpiahsdfpihaspdifhpiausdhfpisdahfpihdspiuh
</div>

Upvotes: 1

Song
Song

Reputation: 750

This is a simple css issue. You can try this.

<div style={{ maxWidth: '100%', overflow: 'hidden', wordBreak: 'break-all' }}>

Upvotes: 1

Related Questions