html图文阅读,html+css怎么给文章页，做阅读全文

手机打开一些体验很好的网站的时候，当文章很长的时候，为了用户体验更好一点，都会出现“阅读全文”这些字样，比如

所以在这里，就效仿做一下这样的效果把，会碰到几个问题需要解决的

1，我只想在移动端出现，并不想电脑上出现

2，透明遮挡有些是用图片解决，但是我网站有白天黑夜模式，这样必须用两张图片解决，这样不太好，所以用样式做出半透明阴影

3，有些文章篇幅很小，本不该出现阅读全文的时候，也会出现

html代码

文章内容

-- 展开阅读全文 --

上面代码是由show_text来控制长度，超过的部分会css隐藏.show_text{

height:1010px;

overflow:hidden;

position: relative;

}

.showall{

display: block;

text-align: center;

margin: 15px 0 0;

color:#54b5db;

position: absolute;

width: 100%;

bottom: 0;

padding-top: 100px;

line-height: 100px;

background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(70%, #fff));

background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);

}

/* 黑夜版阅读全文 */

.sp-dark-mode .showall{

background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(29, 31, 32, 0)),color-stop(70%, #1d1f20));

background-image: linear-gradient(-180deg,rgba(29, 31, 32, 0) 0%,#1d1f20 70%);

}

这里需要注意的是，苹果浏览器linear-gradient会出现灰色，必须要把rgba()设置为背景色一致才行$(document).ready(function(){

var navcontop = $(".entry-content").height();

console.log(navcontop);

if(navcontop <900 ){

$(".showall").addClass("showwen");

$(".show_text"). removeClass("show_text");

}

})

js控制是文章的高度，如果篇幅小，就取消show_text显示，一切按正常的排版显示

此功能已经整合到自媒体博客Spimes主题里面了https://www.dpaoz.com/85