html点击阅读全文,【css】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