<!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>
