Блог

Главная - Вопросы по программированию - многострочный с

многострочный с

#css #reactjs #material-ui

#css — код #reactjs #материал-пользовательский интерфейс #css

Вопрос:

введите описание изображения здесь

КОДОВОЕ СОЕДИНЕНИЕ: https://codesandbox.io/s/94lw648lmo?fontsize=14

Я использую Material-ui с react.

Я пытаюсь составить список, содержащий длинный текст.

Когда задается длинный текст, текст отображается как на картинке, но мне нужен многострочный текст.

Вот мой фрагмент кода.

 <List>
  {this.props.novels.map((novel, index) => (
  <ListItem alignItems="flex-start" key={index} role={undefined}>
    <ListItemText primary={<span>{novel.text}</span>} />
  <ListItemSecondaryAction>
    <Button>
      <ThumbUp />
    </Button>
    <span>{novel.like}</span>
    <Button>
      <ThumbDown />
    </Button>
    <span>{novel.dislike}</span>
  </ListItemSecondaryAction>
  </ListItem>
))}
</List>

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Спасибо.

Ответ №1:

Принятый ответ не сработал для меня, вот что сработало:

 <ListItemText 
    primary={tooLongTitle} 
    primaryTypographyProps={{ style: { whiteSpace: "normal" } }} />

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

1. Спасибо, чувак, для меня это работает нормально, но, кроме того, убедитесь, что опция disableTypography не используется в true.

2. есть ли какой-либо способ поместить разрывы строк в основной текст ListItemText, чтобы принудительно использовать несколько строк?

3. Я могу подтвердить, что он работает в 5.x.

Ответ №2:

вы можете добавить следующий CSS в свою ячейку:

 word-wrap: break-word;

Надеюсь, это поможет