CSS textOverflow: 'ellipsis' not working?

I am working on a project in TSX file where I am using CSS style in the following

<Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
        style={{
          bottom: 5,
          width: '100%',
          textOverflow: 'ellipsis',
          overflow: 'hidden',
          color: 'red',
          display: 'block',
          whiteSpace: 'nowrap',
        }}>
        {accountName}
      </Button>

Here overflow properties are not working while color and other things worked. This style is applied on under the Button tag. Thanks in advance.