{nodeImageUrl && ( Li {nodeImageUrl && ( Li {nodeImageUrl && ( Li

whites-space: nowrap not applied on safari v 16.3 and abov

151 Views Asked by At
    <Box
      fontWeight="bold"
      display="inline"
      component="span"
      whiteSpace="noWrap"
    >
      {nodeImageUrl && (
        <img
          className={classes.nodeHightLightImage}
          alt="List description node"
          src={nodeImageUrl}
        />
      )}
      <Box component="span" whiteSpace="pre-wrap">
        {value}
      </Box>
    </Box>

On safari Version 14.1.1, the noWrap is working as expected that means it won't display the icon and the text in a separate line. But on safari version 16.3 and above the noWrap style don't have any effect and it renders the img around end of line and start the text in a new line like,

enter image description here

But on Safari version 14.1.1, it's displayed like, enter image description here

What I would like to achieve is, I don't want the icon to be displayed in its own line, instead I want it to be displayed with the text, but the text it can wrap.

0

There are 0 best solutions below