0

我正在努力实现这一目标。

最终目标

但是当有超过 2 个项目或者它们真的很长时它们粘在一起，我怀疑它们部署的空间很小，所以它们的行为就是这样。我已经尝试了一些事情，但我没有找到解决方案。

最终会发生什么

这是 HTML* 的一部分（我正在使用 React）。“TextWrapper”基于 ul 标签，“Text”基于 li 标签。您可以在代码中进一步查看。

<TextWrapper>
     <Text> sahfdgfkjus bfkasascef efsaecfs efcsaecfarygadr</Text>
     <Text> re aser swtfas4 tsfgase tawe4 srgsagsefgas </Text>
</TextWrapper>

这是我正在使用的 CSS

export const TextWrapper = styled.ul`
    position: absolute;

    display: flex;
    justify-content: space-between;
    
    margin: 0px;
    list-style-type: none;

    padding-top: 9px;
    padding-bottom: 1px;
    padding-left: 0px;

    left: 98px;
    right: 0px;

    width: auto;
    height: 30px;

    overflow: hidden;
`;

export const Text = styled.li`
    position: relative;

    opacity: var(--highEmphasis);
    font-size: var(--fontMed);
    background: none;

    white-space: nowrap;

    animation: floatText 15s infinite linear;

    @keyframes floatText{
        from {
            right: -100%;
        }

        to {
            right: 100%;
        }
    }
`;
4

1 回答 1

0

尝试给你的文本元素“宽度：100vw”值

于 2022-01-04T18:51:39.593 回答