html 轻松淡出/截断内容并启用“阅读更多”按钮以展开内容（白色背景）。

Posted 2021-05-11

.truncate {
	max-height: 90px;
	position: relative;
	overflow: hidden;
}
.truncate .toggleReadMore { 
	display: block;
	position: absolute; 
	bottom: 0; left: 0;
	width: 100%; 
	text-align: center; 
	margin: 0; padding: 30px 0; 
	 
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255, 255, 255, 0)),color-stop(1, rgba(255, 255, 255, 1)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

$(function() {
	$('.truncate').each(function(){
		$(this).append('<a href="#" class="toggleReadMore"><strong class="button">Read More</strong></a>');
	})

	$(document.body).on('click', '.toggleReadMore', function() {
		// animate to full height
		$(this).parent().animate({
			"max-height": 9999
		}, {duration: 1000, queue: false });

		$(this).fadeOut({ queue: false });		// fade out read-more
		return false;		// prevent jump-down
	})
});

<div class="truncate">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, error, magni dicta fugit delectus nobis harum! Temporibus, ipsam, sequi nam ullam praesentium doloribus quis necessitatibus error molestias natus non eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, accusamus, cumque, adipisci modi officiis magnam eaque aspernatur recusandae accusantium aliquam debitis explicabo dolores ratione labore nulla similique consequuntur sapiente saepe!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, error, magni dicta fugit delectus nobis harum! Temporibus, ipsam, sequi nam ullam praesentium doloribus quis necessitatibus error molestias natus non eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, accusamus, cumque, adipisci modi officiis magnam eaque aspernatur recusandae accusantium aliquam debitis explicabo dolores ratione labore nulla similique consequuntur sapiente saepe!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, error, magni dicta fugit delectus nobis harum! Temporibus, ipsam, sequi nam ullam praesentium doloribus quis necessitatibus error molestias natus non eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, accusamus, cumque, adipisci modi officiis magnam eaque aspernatur recusandae accusantium aliquam debitis explicabo dolores ratione labore nulla similique consequuntur sapiente saepe!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, error, magni dicta fugit delectus nobis harum! Temporibus, ipsam, sequi nam ullam praesentium doloribus quis necessitatibus error molestias natus non eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, accusamus, cumque, adipisci modi officiis magnam eaque aspernatur recusandae accusantium aliquam debitis explicabo dolores ratione labore nulla similique consequuntur sapiente saepe!</p>
</div>