文章最后一行的文字颜色渐变

Question

我有这段代码，这是一篇文章，其中有一个切换锚点“多读”和“少读”，我想在文章的可见区域的最后一行添加渐变色（在按“阅读”之前更多”）。

此图片可能会给您一个清晰的主意：

有代码：

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Read less":"Read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

.small {
  height: 50px;
  width: 255px;
  overflow:hidden;        
}
.big {
  height: auto;
  width: 255px;
}

<script
  src="https://code.jquery.com/jquery-1.9.1.min.js"
  integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
  crossorigin="anonymous">
  </script>
<div class="wrapper">
  <div class="small">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
  </div>
  <a href="#">Read more</a>
</div>

谢谢。

Answer 1

您可以尝试使用linear-gradient

$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

.small {
height: 50px;
width: 255px;
overflow:hidden;
background-image: linear-gradient(to bottom, #000, #000, #fff);
color:transparent;
-webkit-background-clip: text;
}

.big {
height: auto;
width: 255px;
}

<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>

<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> <a href="#">Read more</a>

</div>

Answer 2

您只能使用CSS，使用pseudo选择器并设置伪元素的背景来达到这种效果。如下所示将使这成为可能。您可以根据自己的喜好定位。

.small p
{
    position: relative;
}

.small p:after
{
    content: "";
    display: block;
    height: 25px;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: rgba(240,248,255,0) linear-gradient(to top,#fff,rgba(255,255,255,0)) repeat scroll 0 0;
}

<div class="wrapper">
    <div class="small">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
    </div> <a href="#">Read more</a>

</div>

Answer 3

考虑到您的示例，这是我建议的解决您的问题的方法，有多种方法可以解决，但是不添加任何其他HTML元素的简单方法就是使用after伪选择器

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Read less":"Read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

.small {
    height: 50px;
    width: 255px;
    overflow:hidden;
    
}

.small:after {
    height: 1em;
    width: 100%;
    position: absolute;
    top: calc(50px - 0.5em);
    background: rgba(240,248,255,0) linear-gradient(to top,#fff,rgba(255,255,255,0)) repeat scroll 0 0;
    content: '';
}

.big {
    height: auto;
    width: 255px;
}

<script
  src="https://code.jquery.com/jquery-1.9.1.min.js"
  integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
  crossorigin="anonymous">
  </script>

<div class="wrapper">
    <div class="small">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
    </div> <a href="#">Read more</a>

</div>