一、单行文本
写前端页面的时候很多情况下需要省略号，单行文本溢出省略号
设置单行文本省略号的写法 ：
**先设置宽固定的宽度 ：width: 300px; 必须要的 **
设置不换行 ：white-space:nowrap;
设置省略号：text-overflow: ellipsis;
裁剪多余的内容/溢出的内容：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>
效果图：
二、多行文本
<!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>
效果图 ：
本文转载自: https://blog.csdn.net/ydc222/article/details/127676862
版权归原作者 越努力越好 所有， 如有侵权，请联系我们删除。
版权归原作者 越努力越好 所有， 如有侵权，请联系我们删除。