1. Single line text
When writing front-end pages, ellipsis is often needed in many cases, and single-line text overflows with ellipsis
Set the writing method of single-line text ellipsis :
First set the wide fixed width: width: 300px; required
Set no line break: white-space:nowrap;
Set ellipsis: text-overflow: ellipsis;
Clip excess/overflow content: overflow: hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
<p>低诗才尘范我陀五牙予主始的貂两在褒自，大太出惜洪自冈修判拆者判，保攻斯答笔千欲君沉仅张融六，其卧说次他疾他上第范秦，因可圣，逃杨只二又花冈王中国九极人，逝天不同用我他览真量，到罪制历会褒洪衣，属你沫讨游帝光吴，到六六国几二赏了使他有孔韩的了，慨天而，最战。
</p>
</div>
</body>
</html>Renderings:
Two, multi-line text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width: 200px;
/* 主要控制父元素容器里面子元素的排列方式 */
display: -webkit-box;
display: -moz-box;
white-space: pre-wrap;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
/* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
-webkit-line-clamp: 3;
/*显示行数 要几行就改几行*/
}
</style>
</head>
<body>
<div>
<p>低诗才尘范我陀五牙予主始的貂两在褒自，大太出惜洪自冈修判拆者判，保攻斯答笔千欲君沉仅张融六，其卧说次他疾他上第范秦，因可圣，逃杨只二又花冈王中国九极人，逝天不同用我他览真量，到罪制历会褒洪衣，属你沫讨游帝光吴，到六六国几二赏了使他有孔韩的了，慨天而，最战。
</p>
</div>
</body>
</html>Effect picture:
