禁止文本在绝对定位的div中换行

Question

我发现了一个类似的问题，所以保存正常的文字包装在绝对定位的容器内。 然而，公认的解决方案并不能解决我的问题。 我有一个div，其位置为相对，它位于一个div位置为绝对的div内。 我希望我的文本显示在单行中，而不是用每个单词换行。

我的文件结构如下所示

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

和

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

我的问题与上面引用的问题的主要区别在于，我使用Margin-left和right来调整容器的位置。 我一直在测试不同的东西（设置不同的显示和位置），到目前为止，我发现唯一有效的是添加固定宽度或者设置width:100%，这两种方法都是不可取的，因为它们会改变填充。

Answer 1

您可以使用CSS空白:nowrap；来防止作品被包装。 但是请记住，这些单词可能会以这种方式运行在div之外。 如果您希望看到div之外的单词，则需要使用CSSoverflow:visible；。

因为div不够大，所以这些单词被包装起来了。 您还可以尝试使用CSSwidth:fit-content；使div的宽度响应于内部的文本。

我看到你在第一个问题中链接了JSFiddle。 如果你有另一个JSFiddle，我可以看看，我可以告诉你我的意思。