Css 防止文本在绝对位置的div中换行

我发现了一个类似的问题。但是，接受的解决方案无法解决我的问题。我有一个

div
position:relative
的
div
position:absolute
。我希望我的文本显示在一行中，而不是用每个单词换行

我的文件结构如下所示

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

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

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)};
`;

及

我的问题与上面引用的问题之间的主要区别是，我使用
左边距
，和
右边距
来调整容器的位置。我一直在测试不同的东西（设置不同的显示和位置），到目前为止，我发现唯一有效的方法是添加固定宽度或设置
宽度：100%
，这两种方法都是不可取的，因为它们会改变填充。
您可以使用CSS
空白：nowrap以防止单词被包装。但请记住，单词可能会以这种方式在div之外运行。您可能希望使用CSS
overflow:visible如果要查看超出div的单词

文字被包装起来，因为div不够大，无法容纳所有文字。您还可以尝试使用CSS
width:fit内容
使div的宽度响应内部文本

我在你的第一个问题中看到你把。如果你有另一个我可以看的JSFiddle，我可以告诉你我的意思。
谢谢你，亚当<代码>空白：nowrap
正是我所需要的
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)};
`;