1

I found a similar issue on SO Preserve normal word wrapping inside absolutely positioned container. However the accepted solution will not fix my issue. I have a div with position: relative inside a div with position: absolute. I want my text to appear in a single line and not wrap with each word.

My file structure looks like this

  return (
    <TooltipContainer
      modifiers={modifiers}
      width={wrapperWidth}
      height={wrapperHeight}
    >
      <TooltipArrow modifiers={modifiers} />

      <TooltipLabel
        modifiers={modifiers}
      >
        {text}
      </TooltipLabel>
    </TooltipContainer>
  );

and my styled components look like this

const TooltipContainer = styled.div`
  position: absolute;
  z-index: 1;
  display: block;
  word-wrap: break-word;
  top: 0px;
  text-align: center;
  ${(props) =>
    props.modifiers.includes("right") ? `margin-left: ${props.width}px` : ""};
  ${(props) =>
    props.modifiers.includes("left") ? `right: ${props.width}px` : ""};

  font-family: ${secondaryFont};
  font-size: ${buttonTypeScale.small};
  ${applyStyleModifiers(TOOLTIP_CONTAINER_MODIFIERS)};
`;

and

const TooltipLabel = styled.div`
  background-color: ${basic[1100]};
  border-radius: 4px;
  color: ${basic[100]};
  padding: 0.5625rem 0.5625rem 0.4375rem 0.5625rem;
  visibility: hidden;
  text-align: center;
  position: relative;
  img {
    height: 0.75rem;
    width: 0.75rem;
    vertical-align: middle;
  }
  ${applyStyleModifiers(TOOLTIP_LABEL_MODIFIERS)};
`;

The main difference between my issue and the one cited above is that I am using margin-left, and right to adjust the position of the container. I have been testing different things (setting different displays and positions) and so far the only thing I have found to work is either adding a fixed width or setting width : 100% both of which are undesirable because they change the padding.

tdammon
  • 610
  • 2
  • 13
  • 39

1 Answers1

3

You can use the CSS white-space: nowrap; to keep the words from wrapping. But remember the words might run outside of the div this way. You would want to use the CSS overflow: visible; if you want to see the words that go outside of the div.

The words are wrapping because the div isn't big enough hold them all. You could also try using the CSS width: fit-content; to make the div's width responsive to the text inside.

I see in your first question you linked the JSFiddle. If you have another JSFiddle that I could look at I could show you what I mean.

Adam Baird
  • 167
  • 5