css - 如何在其旁边的 span 元素底部设置 span 元素并使用 css 省略并做出反应？

Question

我想将 NumberAndText div 中的文本设置为数字跨度的级别而不是居中。我想实现如下图所示。

并在 NumberAndText div 中的 Number 和 Text span 之间添加一些 8px 的填充。

我也想为名称 div 设置省略号。

下面是我的代码，

return (

    <Wrapper>
        <div>left side <div>
        <RightContainer>
            <Name>name</Name>
            <NumberAndText>
                <Number>200</Number>
                <Text>Text</Text>
            </NumberAndText>
        </RightContainer>
    </Wrapper>
);

const Wrapper = styled.div`
    margin-right: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
`;

 
const RightContainer = styled.div`
    //no styles yet
`;

const Name = styled.span`
    font-size: 12px;
    font-weight: 700;
`;

 const NumberAndText = styled.div`
     display: flex;
     flex-direction: row;
     align-items: center;
 `;

  const Number = styled.span`
     font-size: 16px;
     font-weight: 700;
 `;

  const Text = styled.span`
     font-size: 12px;
     font-weight: 400;
 `;

我试过什么？

用于将省略号添加到 Name div 添加如下所示，

const Name = styled.span`
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
`;

但这由于某种原因不起作用。我也不知道如何使 NumberAndText div 中的文本看起来像添加的图片。

有人可以帮我解决这个问题。谢谢。

标签： cssreactjs

Answer 1

为了通过基线使用align-items: baseline而不是align-items: center.

为了让你的溢出工作，首先需要溢出。除非您指定对跨度宽度的约束，否则它只会增长以适应其内容。

#number-text {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

#number {
  font-size: 16px;
  font-weight: 700;
}

#text {
  font-size: 12px;
  font-weight: 400;
  width: 40px;
  padding-left: 8px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

<div id="number-text">
  <span id="number">200</span>
  <span id="text">Text with overflow</span>
</div>