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

Question

我有这段代码，这是一篇带有切换锚"read more"和"read less"的文章，我想在文章可见区域的最后一行添加渐变色（之前你的新闻 "read more" ).

这张图片可能会给你一个清晰的思路：

有代码：

$('.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

您可以仅使用 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 2

您可以尝试使用 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 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>

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

Text color gradient on the last line of an article

html

javascript

css

jquery

gradient