How to rotate item text in a menu list so that overflow can be seen

Question

Say i have a TextMenuItem, which uses MenuItem from mui, that is an item in this chain DropDownSearch > SimpleListMenu > FixedSizeList > TextMenuItem, which TLDR is a searchable dropdown component with text items.

When the text is too long for the FixedSizeList (a container) we hide the overflow, great... but we can't see the text when the text is long.

So what can i do? The PM's proposed solution was to pop-out the item text from the already popped out menu, but that does not seem right.

On mouse over is there a simple way to read? rotate? spin? the text so that the menu item text can be read while not popping from a pop-out menu?

export type TextMenuItemType = FunctionComponent<ITextMenuItemProps>;
const TextMenuItem: TextMenuItemType = (props) => {
  const { text, selected, onSelect } = getTextMenuItemProps(props);
  const styles = useTextMenuItemStyles();

  return (
    <MenuItem sx={styles.container} selected={selected} onClick={onSelect}>
      <Typography sx={styles.label}>{text}</Typography>
    </MenuItem>
  );
};

const useTextMenuItemStyles = () => {
  return css({
    container: {
      minHeight: 'auto',
    },
    label: {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    },
  });
};

Answer 1

This is the css that was used to get the text rotating on hover, its not ideal as it rotates on all size inputs. Ideally would like to only rotate where context overflows.

Not ideal, looking for better solutions.

    container: {
      minHeight: 'auto',
      overflow: 'hidden',
    },
    label: {
      whiteSpace: 'nowrap',
      overflow: undefined,
      overflowWrap: 'break-word',
      '@keyframes scrollText': {
        '0%': { transform: 'translate(0%, 0)' },
        '100%': { transform: 'translate(-100%, 0)' },
      },
      '&:hover': {
        animation: 'scrollText 4s linear infinite',
      },
    },