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 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...
随机推荐
- JVM组成结构以及各部分的功能
Java虚拟机主要分为以下五个区: 一.方法区(METHOD AREA): 1. 有时候也成为永久代,在该区内很少发生垃圾回收,但是并不代表不发生GC,在这里进行的GC主要是对方法区里的常量池和对类型 ...
- js技术之循环for
案例:把所有单词以空格为分割并将首字母转为大写 <!DOCTYPE html><html lang="en"><head> <meta c ...
- catkin编译系统
引言 最近项目中遇到一个需求:将 C++ 程序 (不是 ROS node,只是普通的 C++ 程序)中的变量发布到 ROS topic 上,以便 ROS 中的其他 node 进行后续处理. 原 C++ ...
- fetch，终于认识你
fetch和XMLHttpRequest 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好).因此,我写一篇关于fe ...
- IDEA安装配置Scala环境
这里有详细步骤:windows上 IntelliJ IDEA安装scala环境 详细 初学
- 简单的axios请求返回数据解构赋值
本地 data.json 文件 { "name": "大熊", "age": 18, "fnc": [ 1, 2, 3 ...
- Python IDLE清屏
在学习和使用Python的过程中,少不了要与Python IDLE打交道.但使用 Python IDLE 都会遇到一个常见而又懊恼的问题--要怎么清屏? 答案是为IDLE增加一个清屏的扩展ClearW ...
- 使用Socket实现HttpServer（一）
使用Socket实现HttpServer(一) Socket 编程 socket 翻译过来叫插槽,一张图你就明白 socket 就插在 TCP 也就是传输层上,对用户的请求和服务器的响应进行处理. 下 ...
- Python入门-面向对象-装饰器
1.变量作用域 全局变量和局部变量 #变量是有作用域的,分为全局变量和局部变量 num = 100 #这是全局变量 def change(): """ 查看变量作用域 & ...
- MassTransit 入门(一)
本文地址源码 MassTransit是一个面向.net的免费开源分布式应用程序框架. MassTransit使得创建应用程序和服务变得很容易,这些应用程序和服务利用基于消息的.松散耦合的异步通信来获得 ...