css自定义省略实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<title>自适应</title>
<style>
* {padding: 0; margin: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
html,body {
width: 100%;
min-width: 320px;
max-width: 540px;
margin: 0 auto;
}
html {font-size: 13.333333333333333vw}
@media screen and (max-width: 320px) {
html {font-size: 50px}
}
@media screen and (min-width: 540px) {
html {font-size: 70px}
} .forHidden {
overflow: hidden;
width: 100%;
max-height: 1.2rem;
line-height: .4rem;
} .forAutoHeight {
position: relative;
} .content {
width: 100%;
color: #7f7f7f;
font-size: .28rem;
text-align: justify;
} .forGhost {
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: 100%;
height: 100%;
} .forGhost:before {
display: block;
float: right;
content: '';
width: 50%;
height: 100%;
}
.placeholder {
float: right;
width: 50%;
/*这里的height为什么不是1.2rem，因为在自适应情况下，可能会有部分误差，所以这个值要大于最外层元素的max-height*/
height: 1.3rem;
}
.ellipsisMore {
display: block;
float: right;
width: 2.4rem;
height: .4rem;
padding-left: .4rem;
margin-top: -.48rem; /*第一个浮动元素的高度刚好是可见高度，超出被裁剪，所以当更多按钮位于第二个浮动元素后面时，需要往上移，和最后一个段落平齐*/
line-height: .4rem;
color: green;
text-decoration: none;
font-size: .26rem;
/*一个文字被遮住部分会有些突兀，可设置遮罩背景部分透明以表达过渡效果*/
background:linear-gradient(90deg, transparent 2%, #fff 16%, #FFF 0);
} /*利用:target伪元素实现加载更多效果(不足是如果页面有滚动，定位会将段落定位到页面顶端*/
.forHidden:target { max-height: none; }
.forHidden:target .ellipsisMore { display: none; }
</style>
</head>
<body>
<div id="forHidden" class="forHidden">
<div class="forAutoHeight">
<div class="content">
《论生命之短暂》
生命并不短暂，只是我们浪费的太多；
一生足够漫长，如能悉心投入，足以创建丰功伟绩；
然而，在漫无目的、挥霍无度、汲汲于无聊琐事，
最终陷入万劫不复的终极之时，我们才会幡然大悟。
</div>
<div class="forGhost">
<div class="placeholder"></div>
<a href="#forHidden" class="ellipsisMore" target="_self">...更多</a>
</div>
</div>
</div>
</body>
</html>
css自定义省略实例2的更多相关文章
- css自定义省略实例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯 CSS 自定义多行省略：从原理到实现
文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...
- 【转】精选30个优秀的CSS技术和实例
今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...
- 精选30个优秀的CSS技术和实例
精选30个优秀的CSS技术和实例 投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- css技术和实例
今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...
- CSS自定义样式
CSS自定义样式 1. 自定义字体 先将字体文件放到web服务器上,需要时自动下载到用户计算机上 属性:@font-face 例: @font-face{ font-family:myFont; sr ...
- jQ效果：jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- CSS 分类 (Classification) 实例
CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...
随机推荐
- 解决MySQL报错ERROR 2002 (HY000)
今天在为新的业务线搭架数据库后,在启动的时候报错 root@qsbilldatahis-db01:/usr/local/mysql/bin# ./mysql ERROR 2002 (HY000): C ...
- kafka producer的batch.size和linger.ms
1.问题 batch.size和linger.ms是对kafka producer性能影响比较大的两个参数.batch.size是producer批量发送的基本单位,默认是16384Bytes,即16 ...
- mybatis源码之我见
以前一直想看mybatis的源代码,但是一直没找到入口(傻),最近看教程,有些感悟. 和起以前一样,关键代码我会用红色标记. 首先,先贴下我的dao和mapper,代码很简单,和平时写的hello w ...
- BMZCTF 2020祥云杯到点了
2020祥云杯到点了 下载附件得到三个word文档,我们打开第一个文档然后将隐藏文字显示出来 得到提示 我们查看属性应该就是日期了我们先把他记录下来 然后打开第二个文档 输入刚刚的密码 在第二个wor ...
- Python 与 C++ 向量
Python 与 C++ 向量 Python 和 C++ 对比 我们再回到向量!你已经学习了如何声明一个空的向量. 在下面的代码中,你可以比较 Python 列表和 C++ 向量的语法.你会看到,C+ ...
- 高效使用Java构建工具，Maven篇｜云效工程师指北
大家好,我是胡晓宇,目前在云效主要负责Flow流水线编排.任务调度与执行引擎相关的工作. 作为一个有多年Java开发测试工具链开发经验的CRUD专家,使用过所有主流的Java构建工具,对于如何高效使用 ...
- 如何更愉快地使用em —— 别说你懂CSS相对单位
前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...
- A Beginner’s Introduction to CSS Animation中文版
现在越来越多的网站正在使用动画,无论是以GIF,SVG,WebGL,背景视频等形式. 当正确使用时,网络上的动画带来生机和交互性,为用户增添了额外的反馈和体验. 在本教程中,我将向您介绍CSS动画; ...
- java中StringBuffer的用法
2.StringBuffer StringBuffer:String类同等的类,它允许字符串改变(原因见上一段所说).Overall, this avoids creating many tempor ...
- ELK日志保留7天-索引生命周期策略
一.简介 ELK日志我们一般都是按天存储,例如索引名为"kafkalog-2022-04-05",因为日志量所占的存储是非常大的,我们不能一直保存,而是要定期清理旧的,这里就以保留 ...