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 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...
随机推荐
- spring-boot-learning 缓存之redis
什么是BSD协议: BSD是"Berkeley Software Distribution"的缩写,意思是"伯克利软件发行版". BSD开源协议是一个给于使用者 ...
- SQL 注入漏洞产生的原因？如何防止？
SQL 注入产生的原因:程序开发过程中不注意规范书写 sql 语句和对特殊字符进 行过滤,导致客户端可以通过全局变量 POST 和 GET 提交一些 sql 语句正常执行. 防止 SQL 注入的方式: ...
- 利用 ps 怎么显示所有的进程? 怎么利用 ps 查看指定进 程的信息？
ps -ef (system v 输出) ps -aux bsd 格式输出 ps -ef | grep pid
- jdk代理和cglib代理源代码之我见
以前值是读过一遍jdk和cglib的代理,时间长了,都忘记入口在哪里了,值是记得其中的一些重点了,今天写一篇博客,当作是笔记.和以前一样,关键代码,我会用红色标记出来. 首先,先列出我的jdk代理对象 ...
- spi详解
来源:https://www.sohu.com/a/211324861_468626 1. SPI简介 SPI,是英语Serial Peripheral interface的缩写,顾名思义就是串行外围 ...
- Altium Designer 开始一个项目
通常一个嵌入式开发都需要一个开发板,这就涉及到原理图设计和PCB设计等流程.目前比较主流的设计软件当属Altium Designer了,于是便向写一个关于这方面的专题,也好总结一下,省得以后忘记. A ...
- USB3.0接口EMC设计标准电路
- html简单响应式滚动条置顶
简单响应式滚动条置顶 一般的,让页面出现滚动条的常见方法有: overflow:auto||overflow:scroll 或者overflow-x水平滚动条和overflow-y垂直滚动条 那么现在 ...
- css布局基础总结
前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...
- Python中使用正则表达式获取两个字符中间部分
问题背景:当我们爬取网页信息时,对于一些标签的提取是没有意义的,所以需要提取标签中间的信息. 解决办法:用到了re包下的函数 方法1:用到了research()方法和group()方法 方法2:用到了 ...