мультилинии с <ListItemText>

Question

CODEPEN: https://codesandbox.io/s/94lw648lmo?fontsize=14

Я использовал Material-ui с реагировать.

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

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

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

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

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

Спасибо.

Answer 1

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

word-wrap: break-word;

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