CSS实现多行省略

什么是多行省略?

1.jpg

当字数多到一定程度就显示省略号点点点。最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。

同行这么做:

2.jpg

  1. Google Plus用透明到白色的渐变遮罩,渐变遮罩在文字超出的时候才显示,但无法挤出文字,且背景只能纯色,不理想。

  2. 豌豆荚则更简单粗暴换行显示,换行显示则文字未超出时依然显示 ...xxx,更不理想!

我这样做:

3.jpg

在QQ浏览器的页面用了一个原创的mod-more UI组件,实现了定制的多行省略,还是纯CSS的,领先同行一大截,赞!赞!赞!只可惜,mod-more组件的高度是固定的。对mod-more进一步进化,完美自适应高度,而且代码简化易用。

怎么做到的?

原理详解!

按需显示...更多

5.gif

<!doctype html>
<html>

<body>
<style>
	@-webkit-keyframes width-change {
		0%,
		100% {
			width: 320px
		}
		50% {
			width: 260px
		}
	}
	/*测试*/
</style>
<div style="font-size:12px;line-height:18px;-webkit-animation:width-change 8s ease infinite;
                    background: rgb(230, 230, 230);">
	<div style="float:right;margin-left: -50px;width:100%;position:relative;
	                       background: hsla(229, 100%, 75%, 0.5);">
	腾讯成立于1998年11月,是目前中国领先的互联网增值服务提供商之一。成立10多年来,
	腾讯一直秉承“一切以用户价值为依归”的经营理念,为亿级海量用户提供稳定优质的各类服务,
	始终处于稳健发展状态。2004年6月16日,腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
	</div>
	<div style="float:right;position:relative;width:50px;height: 108px;
	color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div>
	<div style="float:right;width:50px;height:18px;position: relative;
	          background: hsla(27, 100%, 75%, 0.5);">...更多</div>
</div>
</body>

</html>

利用右浮动原理——右浮动元素从右到左依次排列,不够空间则换行。蓝色块、粉色块、橙色块依次右浮动,蓝色块高度小于6行文字时,橙色块在右边,蓝色块高度大于6行文字时,左下角刚好够橙色块排列的空间,于是橙色块就到左边了

6.gif

<!doctype html>
<html>

<body>
<style>
	@-webkit-keyframes width-change {
		0%,
		100% {
			width: 320px
		}
		50% {
			width: 260px
		}
	}
	/*测试*/
</style>
<div style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;
                                                                  background: rgb(230, 230, 230);">
	<div style="float:right;margin-left: -50px;width:100%;position:relative;
	                           background: hsla(229, 100%, 75%, 0.5);">
	腾讯成立于1998年11月,是目前中国领先的互联网增值服务提供商之一。成立10多年来,
	腾讯一直秉承“一切以用户价值为依归”的经营理念,为亿级海量用户提供稳定优质的各类服务,
	始终处于稳健发展状态。2004年6月16日,腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
	</div>
	<div style="float:right;position:relative;width:50px;height: 108px;
	color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div>
	<div style="float:right;width:50px;height:18px;position: relative;
	background: hsla(27,100%,75%,0.5);left:100%;-webkit-transform:translate(-100%,-100%);">
	...更多
	</div>
</div>
</body>

</html>

进一步将橙色块偏移到正确位置就大功告成了!细心的同学会发现,将橙色块加上渐变底就是Google Plus在用的方案。

文字溢出截断

7.gif

<!DOCTYPE html>
<html>

<body>
	<style>
		@-webkit-keyframes width-change {
			0%,
			100% {
				width: 320px
			}
			50% {
				width: 260px
			}
		}
		/*测试*/
	</style>
	<div style="font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;
	-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
		<div style="color:#000;display: inline;vertical-align: top;background: rgb(204, 204, 204);">
		腾讯成立于1998年11月,是目前中国领先的互联网增值服务提供商之一。成立10多年来,
		腾讯一直秉承“一切以用户价值为依归”的经营理念,为亿级海量用户提供稳定优质的各类服务,
		始终处于稳健发展状态。2004年6月16日,腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
		</div>
	</div>
</body>

</html>

-webkit-line-clamp是webkit内核的私有css属性,用于进行多行省略,在安卓和ios上全支持。但它固定使用省略号,无法直接扩展。而且自带了溢出截断逻辑,作用于容器高度。仔细考察可发现它使用的省略号是单字符,可以用文字css属性如font-size,letter-spacing,color等控制。

8.gif

<!DOCTYPE html>
<html>

<body>
	<style>
		@-webkit-keyframes width-change {
			0%,
			100% {
				width: 320px
			}
			50% {
				width: 260px
			}
		}
		/*测试*/
	</style>
	<div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;
	-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
		<div style="color:#000;display: inline;font-size: 12px;vertical-align: top;
		letter-spacing: 0;background: rgb(204, 204, 204);">
		腾讯成立于1998年11月,是目前中国领先的互联网增值服务提供商之一。成立10多年来,
		腾讯一直秉承“一切以用户价值为依归”的经营理念,为亿级海量用户提供稳定优质的各类服务,
		始终处于稳健发展状态。2004年6月16日,腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
		</div>
	</div>
</body>

</html>

设置外容器的font-sizeletter-spacingcolor,并在子容器里恢复就可以单独设置省略号。这里外容器设置font-size的值等于2倍行高(余下要撑开的宽度可用letter-spacing补足,也可仅用font-size撑开全部的宽度),color:transparent可以让line-clamp既挤出文字又不截断容器高度,外容器高度达到7行而不是默认表现的6行,从而达到需要的溢出截断效果

9.png

合体!定制多行省略

10.gif

<!DOCTYPE html>
<html>

<body>
<style>
	@-webkit-keyframes width-change {
		0%,
		100% {
			width: 320px
		}
		50% {
			width: 260px
		}
	}
	/*测试*/
</style>
<div style="position: relative;line-height:18px;-webkit-animation:width-change 8s ease infinite;
max-height: 108px;">
<div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient:vertical;
-webkit-line-clamp: 6;color: transparent;line-height: 18px;position: relative;">
<div style="font-size:12px;color: #000;display: inline;vertical-align: top;letter-spacing: 0;">
	腾讯成立于1998年11月,是目前中国领先的互联网增值服务提供商之一。成立10多年来,
	腾讯一直秉承“一切以用户价值为依归”的经营理念,为亿级海量用户提供稳定优质的各类服务,
	始终处于稳健发展状态。2004年6月16日,腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
</div>
<div style="position:absolute;top: 0;left: 50%;width: 100%;height: 100%;letter-spacing:0;color: #000;
font-size: 12px;background: rgba(173, 216, 230, 0.5);">
<div style="float: right;width: 50%;height: 100%;background: rgba(255, 192, 203, 0.5);"></div>
<div style="float: right;width: 50%;height: 108px;background: hsla(223, 100%, 50%, 0.19);"></div>
<div style="float: right;width: 50px;height: 18px;position: relative;
background:rgba(255, 165, 0, 0.5);" class="">... 更多</div>
</div>
</div>
</div>
</body>

</html>

-webkit-line-clamp实现的文字溢出截断代码为主体,叠加绝对定位同步的按需显示...更多结构。因为绝对定位,这里使用百分比简化代码。最外包一层结构限制最大高度。

11.gif

<!DOCTYPE html>
<html>

	<body>
		<style>
			/*
 * 行高 h
 * 最大行数 n
 * ...更多容器的宽 w
 * 字号 f
 */
			
			@-webkit-keyframes width-change {
				0%,
				100% {
					width: 320px
				}
				50% {
					width: 260px
				}
			}
			
			.ellipsis {
				position: relative;
				background: rgb(230, 230, 230);
				width: 260px;
				max-height: 108px;
				/* h*n */
				line-height: 18px;
				/* h */
				overflow: hidden;
				-webkit-animation: width-change 8s ease infinite;
			}
			
			.ellipsis-container {
				position: relative;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 6;
				/* n */
				font-size: 50px;
				/* w */
				color: transparent;
			}
			
			.ellipsis-content {
				color: #000;
				display: inline;
				vertical-align: top;
				font-size: 12px;
				/* f */
			}
			
			.ellipsis-ghost {
				position: absolute;
				z-index: 1;
				top: 0;
				left: 50%;
				width: 100%;
				height: 100%;
				color: #000;
			}
			
			.ellipsis-ghost:before {
				content: "";
				display: block;
				float: right;
				width: 50%;
				height: 100%;
			}
			
			.ellipsis-placeholder {
				content: "";
				display: block;
				float: right;
				width: 50%;
				height: 108px;
				/* h*n */
			}
			
			.ellipsis-more {
				float: right;
				font-size: 12px;
				/* f */
				width: 50px;
				/* w */
				height: 18px;
				/* h */
				margin-top: -18px;
				/* -h */
			}
		</style>
		<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>

为什么这么做?

line-clamp有3宗罪

12.gif

text-align:justify一起用会使省略号和文字相叠

13.gif

超出截断后会截掉部分行高

14.gif

省略号出现在单词中间

定制省略当然某问题啦

15.gif

text-align:justify时如期所示,没问题!

16.gif

截断时如期所示,也没问题!

17.gif

省略号在有单词时如期显示,依然没问题!

更别说点点点花样增改

18.jpg

19.gif

简单增改文字加链接只是小case

20.gif

用折角还是其他图片表示文本溢出可以增添趣味

21.gif

溢出时显示溢出字数增加了实用用途

22.jpg

本文转载自:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html

Image placeholder
前端答疑
未设置
  51人点赞

没有讨论,发表一下自己的看法吧

推荐文章
CSS实现自适应分隔线的N种方法

分割线是网页中比较常见的一类设计了,比如说知乎的更多回答这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了心想:知乎

怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动效果图:思路分析:第一步,定义div>ul>li*7,因为有7张图片。第二步,设置div的宽度高度以及li的浮动,保证它们全部在div内的同一行。第三步,实现滚动。用到了

基于Webpack的css sprites实现方案

一、前言关于csssprites(雪碧图/精灵图)的几种实现方案可以参考浅谈CSSSprites雪碧图应用。本文主要讨论基于webpack的csssprites实现方案。由于使用webpack时会涉及

写了一款 iOS App: 足迹中国 - 统计出行省市,生成各省和全国的旅行地图

说具体功能之前,先放一下下载链接:https://apps.apple.com/cn/app/id1482250279功能地图轮廓截取旅行照片,并可分享 统计你去过中国的多少个省,多少个市 将截取的市

基于Redis实现Spring Cloud Gateway的动态管理

引言:SpringCloudGateway是当前使用非常广泛的一种API网关。它本身能力并不能完全满足企业对网关的期望,人们希望它可以提供更多的服务治理能力。但SpringCloudGateway并不

Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言在企业应用的快速开发中,我们需要尽快的完成一些功能。如果您使用了AntDesignVue,在进行表单的文件上传相关功能开发的时候,您肯定迫不及待地需要找到一篇包治百病的文章,正是如此,才有了该文的

js实现固定大小轮播图

{ value.onclick=function(){ //赋值索引 indexActive=index //执行轮播方法 swipterMoveFn() } }) //右箭头点击 arrow

redis实践及思考

导语:当面临存储选型时是选择关系型还是非关系型数据库?如果选择了非关系型的redis,redis常用数据类型占用内存大小如何估算的?redis的性能瓶颈又在哪里?背景前段时间接手了一个业务,响应时间达

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

PHP 进程池与轮询调度算法实现多任务

phper请了解进程调度策略,CPU时间片,进程控制【创建,销毁,回收,进程信号】与及进程运行流程和基本的进程组,信号中断原理,以及进程之间的关系。关于进程的更多内容可参考本人前面撸过的文章或是百度了

日志监控实践 – 监控Agent集成Lua引擎实现多维度日志采集

作者简介:董涵   百度资深研发工程师负责百度智能运维(Noah)服务管理和分布式监控架构研发工作,在分布式系统和大规模数据处理、可用性工程方向有广泛的实践经验。干货概览对于互联网行业来说,最有价值的

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定

css能实现自动更换图片吗

css能实现自动更换图片吗css能实现自动更换图片,具体的做法是为每一张图片创建一个animation动画,设置不同的duration持续时间,再通过keyframes实现不透明度的变化,来实现更换图

css3实现元素不停旋转

css3实现元素不停旋转主要使用了@keyframes和animation,以及指定infinite,播放次数不限来实现。HTML代码如下: HTML中文网 CSS代码如下:(相关课程推荐:css视

css底层什么技术实现的

css底层什么技术实现的css底层是由浏览器进行解析渲染实现的。具体是通过css解析器解析css语法,生成css规则树,再结合dom树进行渲染绘制到屏幕上的。(相关课程推荐:css视频教程)CSS的渲

css3怎么实现菱形渐变?

css3怎么实现菱形渐变1、实现菱形渐变,首先需要实现一个菱形,使用了clip-path属性:.diamond{ width:200px; height:200px; clip-path:pol

css水平垂直居中有几种实现方式?

css水平垂直居中有几种实现方式?1、水平对齐+行高【思路一】text-align+line-height实现单行文本水平垂直居中 .f10.test{ text-align:center; line

css定位怎么实现居中?

css定位怎么实现居中?使用绝对定位absolute是一种常用、兼容性很好的方式。.element{ width:600px;height:400px; position:absolute; left

wordpress无法加载css

wordpress无法加载css出现这种情况是因为wordpress安装时用http://localhost访问来安装,局域网访问时,加载css的路径不对,所以会出现css无法加载,只显示文字。解决方

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

css什么时候用class和id?

css什么时候用class和id?当css样式用于不止一个元素时,使用class来定义。当css样式只应用于一个元素时,使用id来定义。例如导航条,每个页面中,只存在一个顶部导航条的话,可以使用id来