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