CSS实现多行文字截断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多行截断</title>
		<style>
			.line1{
			    white-space:nowrap;/*文字不换行*/
			    overflow:hidden;
			    text-overflow:ellipsis; 
			}
			.line2{
				display: -webkit-box;/*对象作为弹性盒子使用*/
			    -webkit-line-clamp: 2;/*不规则属性,只有webkit内核的浏览器才支持,移动设备大部分支持*/
			    -webkit-box-orient: vertical;/*设置或检索伸缩盒子对象的子元素的排列方式*/
			     overflow : hidden;
			    text-overflow: ellipsis;
			}
			
			.longtext{
				width: 200px;
				margin: 100px auto;
				background: hotpink;
			}
			.wys{
				position: relative;
				line-height: 18px;
				height: 36px;
				overflow: hidden;
				word-break:break-all;
			}
			.wys:after{/*该方法...会一直有,不适用*/ 
				content: '...';
				position: absolute;
				right: 0;
				bottom: 0;
				padding: 0 20px 1px 45px;
				
				background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
			    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
			    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
			    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
			    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
			}
			
			.wrap{
				height: 40px;
				line-height: 20px;
				overflow: hidden;
			}
			.wrap .text{
				float: right;
				width: 100%;
				margin-left: -5px;
				word-break: break-all;				
			}
			.wrap::before{
				float: left;
				width: 5px;
				content: '';
				height: 40px;
			}
			.wrap::after{
				float: right;
				content: '...';
				height: 20px;
				line-height: 20px;
				width: 3em;/*三个省略号的宽度*/
				margin-left: -3em;/*使盒子不占位置*/
				position: relative;/*移动省略号位置*/
				left: 100%;
				top: -20px;
				padding-right: 5px;
			}
		</style>
	</head>
	<body>
		<p class="wys">简历大家自然都有,这里我要说的是如果要找海外的工作,最好在LinkedIn上维护一份详细的英文简历,不管你是否打算在LinkedIn上投简历,这都是很有用的。
		 首先,很多公司在投简历的时候不要你发送的PDF简历,而是要求你在它自己的网站上填写一堆信息</p>
		 
		 <div class="wrap">
		 	<div class="text">
		 		简历大家自然都有,这里我要说的是如果要找海外的工作,最好在LinkedIn上维护一份详细的英文简历,不管你是否打算在LinkedIn上投简历,这都是很有用的。首先,很多公司在投简历的时候不要你发送的PDF简历,而是要求你在它自己的网站上填写一堆信息
		 	</div>
		 </div>
	</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值