как текст обернуть пункт меню в материале ui.

Question

Итак, у меня есть текст, который мне нужно показать в popover. У меня есть следующий код, который заставляет текст появляться в одной строке. Мне нужно сделать обертку текста, чтобы они были в нескольких строках, но причина ui, но до сих пор мое обновление не было успешным. Есть идеи?

      <Popover 
           anchorEl={target} 
           open={open} 
           anchorOrigin={{horizontal: 'middle', vertical: 'bottom'}} 
           targetOrigin={{horizontal: 'left', vertical: 'bottom'}} 
           onRequestClose={handleRequestClose} 
           animation={PopoverAnimationVertical}> 
           <Menu 
            autoWidth={true} 
            > 
            <MenuItem style={{width: "200px", height: "200px"}}> 
             <p style={{display: "flex", flexWrap: "wrap"}}>'aslkjflajdsljflskdjflsdfjlsjdfjdfjlasjkfadlsf'</p> 
            </MenuItem> //this does not work.... 
           </Menu> 

Answer 1

Попробуйте сбросить whiteSpace стиль -

<MenuItem style={{whiteSpace: 'normal'}}> 
    <p>This song is just six words long. This song is just six words long. This song is just six words long. This song is just six words long.</p> 
</MenuItem>