Блог

Главная - Вопросы по программированию - Текст React js не помещается на экране

Текст React js не помещается на экране

#reactjs

#reactjs

Вопрос:

Я работаю над веб-приложением ReactJS. Я получаю значение с сервера и хочу отобразить его внутри элемента сетки, но проблема в том, что значение представляет собой длинный текст, значение в моем коде {signature} , и когда оно отображается, оно не помещается на экран. Это моя попытка

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

Это скриншот результата :
введите описание изображения здесь

Комментарии:

1. Не могли бы вы предоставить скриншот того, как это выглядит?

2. В свой объект style попробуйте добавить свойство text overflow: flexWrap:'wrap', textOverflow: 'ellipsis' .

3. @Mr . Robot это не решает проблему

4. Попробуйте добавить overflow: hidden

5. Поскольку это одна длинная строка; вы могли бы попробовать css-свойство ‘word-wrap’ со значением ‘break-word’ в сочетании со значением ширины контейнера. перенос слов:разрывслова

Ответ №1:

Это простая проблема с css. Вы можете попробовать это.

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

Ответ №2:

Вы можете обернуть длинную строку без пробелов, используя word-wrap свойство css со break-word значением. Ниже приведен пример использования HTML с CSS.

Для стиля React; адаптируйте приведенное ниже свойство css для использования camel case.

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