Question

我正在寻找构建内联加载条，使用跨度然后分层：after元素具有完全相同的内容但上面有不同的颜色/ bgcolor。

HTML

<span id="target" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</span>

CSS

#target {
    margin: 25px;
    font-size: 22px;
    color: #111;
    position: relative;
}

#target:after {
    content: attr(data-text);
    color: orange; background-color: rgba(50,50,50,0.3);
    position: absolute;
    overflow: hidden;
    width: 0;
    left: 0;
    top: 0;
    height: 28px;
    transition: width 5s linear;
}

#target.loading:after {
    width: 100%;
}

这个演示是抽象的，但它的目的是指出一个奇怪的问题：效果与第一个单词的预期效果一样，用新颜色顺利填充它，但随后停止工作，而是跳过接下来的两个单词。我添加了一个背景颜色来展示它实际上按预期继续。但与文本不同。

Answer 1

问题是:after想要自动换行，但由于溢出已关闭，您无法看到其余的单词。（也就是说，如果高度会更大，最后两个单词会出现在下一行。）

解决方案：通过添加属性

来阻止wordwrap

white-space:nowrap;

请参阅updated fiddle

内联文本加载栏使用：after元素

1 个答案: