<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text overflow with ellipsis http://www.ablanxue.com/</title>
<style type="text/css">
.mutil-line-ellipsis {
width: 400px;
height: 50px;
line-height: 25px;
margin: 20px 20px 50px 300px;
border: 1px solid #AAA;
line-height: 25px;
overflow: hidden;
}
/* Equivalent to previous prop*/
.mutil-line-ellipsis:before {
content: '';
float: left;
width: 5px;/*Reduce the width to 5px, the rest of the properties remain unchanged*/
height: 50px;
}
/* Equivalent to the previous main*/
.mutil-line-ellipsis > :first-child {
float: right;
width: 100%;
margin-left: -5px;/*Let the main element move to the left by 5px, so that the main element completely fills the parent element in width;*/
word-break: break-all;
}
/* Equivalent to the previous realEnd*/
.mutil-line-ellipsis:after {
content: '...';
box-sizing: content-box;
float: right;
position: relative;
width: 50px;
height: 25px;
top: -25px; /*Equal to the negative value of the height, which is the line height of the text*/
left: 100%;
/*The margin-left: -50px, padding-right: 5px is set so that the final width of the box model of the realend element is calculated as 5px. */
margin-left: -50px;
padding-right: 5px;
font-size: 13px;
text-align: right;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 40px);
}
</style>
</head>
<body>
<div class="mutil-line-ellipsis">
<div>
Pakistani Prime Minister Abbasi concluded a two-day trip to Nepal on the 6th. He is the first foreign leader received by Nepal's new Prime Minister Oli after taking office. The two consulted not only on bilateral relations.
</div>
</div>
</body>
</html>