css自定义省略实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
<title>合体</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
} /*
用于模拟段落伸缩情况，这里可以看成是整个动画是0%~100%，0~50%收缩；50%~100%伸展
*/
@-webkit-keyframes width-change {
0% {width: 100%}
50% {width: 50%;}
100% {width: 100%}
} .ellipsis {
position: relative;
/*只展示需要的内容，其他不需要的模块可隐藏*/
/*overflow: hidden;*/
/*这里为了更好了解实现逻辑设置width50%， 一般为100%*/
width: 60%;
/*这里为什么是108,因为设置的是6行，且行高为18，6*18*/
max-height: 108px;
line-height: 18px;
background: rgb(230, 230, 230);
/*动画无限滚动，更好查看效果。*/
/*-webkit-animation: width-change 28s ease infinite;*/
} /*
这个容器框看起来是多余的，实则：
自定义”...更多“显示样式用到ellipsis-ghost容器。该容器及其部分子元素的height是同父元素变化的。
容器高度自适应正是实现自定义“...更多”效果精髓。如果没有ellipsis-container,则ellipsis-ghost高就为ellipsis设置的最大值108px.
ellipsis-content容器装的是文字，文字内容决定ellipsis-container的高度，ellipsis-ghost设置为position:absolute,会脱离文档流，
在文字的上方，设置其left: 50%,只显示其半，显示的是ellipsis-placeholder，ellipsis-placeholder高度和ellipsis允许的最大高度
一样，而ellipsis-ghost的第三个元素ellipsis-more的位置就根据.ellipsis-ghost:before元素决定，而.ellipsis-ghost:before的
高度又是随ellipsis-content一样变化。 也就是ellipsis的max-height和ellipsis-placeholder的height一致，这是所允许最多行数的高度了，如果文字所需高度大于上诉高度才会
出现更多。比如说上述需要的是四行才出现省略，而内容是三行的这不会出现。 */
.ellipsis-container {
position: relative;
/*display: -webkit-box;*/
/*-webkit-box-orient: vertical;*/
/*-webkit-line-clamp: 6;*/ /**/
/*font-size: 50px;*/
/*color: transparent;*/
} .ellipsis-content {
display: inline-block;
color: #000;
font-size: 12px;
text-align: justify;
} .ellipsis-ghost {
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: 100%;
height: 100%;
color: #000;
background-color: rgba(255,64,84,0.45);
} .ellipsis-ghost:before {
display: block;
float: right;
content: "";
width: 50%;
height: 100%;
background: rgb(64 115 193);
} .ellipsis-placeholder {
display: block;
float: right;
content: "";
width: 50%;
height: 108px;
background: #9f8d3c;
opacity: .4;
} .ellipsis-more {
float: right;
width: 50px;
height: 18px;
margin-top: -18px;
font-size: 12px;
background: #f00;
color: #fff;
}
</style>
</head>
<body>
<div class="ellipsis">
<div class="ellipsis-container">
<div class="ellipsis-content">
腾讯成立于1998年11月，是目
前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一
切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服
务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交
所主板公开上市(股票代号700)。
</div>
<div class="ellipsis-ghost">
<div class="ellipsis-placeholder"></div>
<div class="ellipsis-more">...更多</div>
</div>
</div>
</div>
</body>
</html>
css自定义省略实例1的更多相关文章
- css自定义省略实例2
<!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 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...
随机推荐
- Element-UI资源原型库
Element-UI v2.0.0版本 Axure和Sketch库: 链接:https://pan.baidu.com/s/1LdsEh8BKQBjcWBKV5yQilQ 提取码:1xqn
- Redis 常见性能问题和解决方案?
1.Master 最好不要写内存快照,如果 Master 写内存快照,save 命令调度 rdbSave 函数,会阻塞主线程的工作,当快照比较大时对性能影响是非常大的,会间断性 暂停服务 2.如果数据 ...
- Tcp三次握手四次挥手个人学习
最近想跳槽,学习了tcp中的三次握手与四次挥手,特意记录下,加深记忆 SYN 代表请求创建连接 FIN 表示请求关闭连接 ACK 代表确认接受,不管是三次握手还是四次分手,在回应的时候都会加上ACK= ...
- 运筹学之"概率"和"累计概率"和"谁随机数"
概率 = 2/50 = 0.2 累计概率 = 上个概率加本次概率 案例1 概率=销量天数 / 天数 = 2 /100 = 0.02 累计概率 = 上个概率加本次概率 = 0.02 +0.03 = 0. ...
- asp.net 可视化操作（一）——asp.net安装与使用
目录 安装 创建网页 设计网页 运行 vs 2019安装asp.net 1.安装 打开vs,选择继续但无需代码 -->工具–>获取工具和功能 勾选如下选项后,点击关闭 点击更新等待安装完成 ...
- pandas数据读取
02. Pandas读取数据 本代码演示: pandas读取纯文本文件 读取csv文件 读取txt文件 pandas读取xlsx格式excel文件 pandas读取mysql数据表 1.读取纯文本文件 ...
- 洋桃电子之STM32
1.ARM内核与分类 作者:知乎用户链接:https://www.zhihu.com/question/52915983/answer/258507276来源:知乎著作权归作者所有.商业转载请联系作者 ...
- C语言形参和实参的区别（非常详细）
如果把函数比喻成一台机器,那么参数就是原材料,返回值就是最终产品:从一定程度上讲,函数的作用就是根据不同的参数产生不同的返回值.这一节我们先来讲解C语言函数的参数,下一节再讲解C语言函数的返回值.C语 ...
- Java在方法中定义可变参数类型
学习目标: 掌握可变参数的应用 学习内容: 1.定义 在方法中传递数组有一种更简单的方式--方法的可变参数,其本质是一个语法糖,目的是让开发者写代码更简单. 2.语法 [修饰符] 返回值类型 方法名称 ...
- Springcloud报错：java.lang.IllegalStateException: Service id not legal hostname (/a-service)
今天在做springcloud链路追踪的时候,报错java.lang.IllegalStateException: Service id not legal hostname (/a-service) ...