I came across a similar problem on Stack Overflow Preserve normal word wrapping inside absolutely positioned container. However, the solution provided did not resolve my issue. In my case, I have a div with position: relative nested within a parent div with position: absolute. My goal is to display the text in a single line without word wrapping.
This is how my file structure appears:
return (
<TooltipContainer
modifiers={modifiers}
width={wrapperWidth}
height={wrapperHeight}
>
<TooltipArrow modifiers={modifiers} />
<TooltipLabel
modifiers={modifiers}
>
{text}
</TooltipLabel>
</TooltipContainer>
);
Furthermore, here are my styled components:
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 key difference between my scenario and the aforementioned one lies in my use of margin-left and right properties to adjust the container's position. I have experimented with various settings (such as different displays and positions), but so far, the only effective solution I found involved either setting a fixed width or applying width: 100%, both of which impact the padding in undesired ways.