CSS实现多行文字截断

最新推荐文章于 2024-06-23 16:00:00 发布

薛定谔的喵喵喵

最新推荐文章于 2024-06-23 16:00:00 发布

阅读量1.5k

点赞数

分类专栏：前端开发文章标签： css换行

本文链接：https://blog.csdn.net/gongzhonghua/article/details/83896473

版权

前端开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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