Question

我有两个div叠在一起，包含完全相同的文本。我的底部div是灰色的，我的顶部div是红色的。我试图找到一种方法，用预先确定的％对文本着色，即仅显示顶部彩色div的某个％，并隐藏其余部分以使文本为混合颜色。我希望能够有一封信，例如，有一半是灰色，一半是红色。在这封信的右边，左边的一切都是灰色的，红色。

到目前为止，我一直在玩width x pixels和overflow-x:hidden;的{{1}}小型试验。但是，它会将文本分解为单词，并在每个单词的新行上显示每个单词的第一个x pixels。如果给定的width大于第一个单词的width，它也会失败。有没有办法用CSS完成我想要的东西？

http://jsfiddle.net/kaj88maw/

<div class="text-grey">
    We love Stack Overflow
</div>
<div class="text-color">
    We love Stack Overflow
</div>

.text-grey, .text-color{
    position: absolute;
    font-size: 36px;
    font-family: arial;
    font-weight: 800;
}

.text-grey{
    color: grey;
}

.text-color{
    color: red;
    overflow-x: hidden;
    width: 13px;
}

Answer 1

您是否尝试过使用white-space:nowrap;

以下是演示：http://jsfiddle.net/mirohristov/kaj88maw/7/

CSS - 如何仅显示顶部div的百分比，其中两个相同的div相互堆叠

1 个答案: