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>