文本溢出省略
单行文本溢出省略
文本只在一行内显示
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
width: 200px;
border: 1px solid black;
overflow: hidden; /*溢出省略*/
white-space: nowrap; /*不允许换行*/
text-overflow: ellipsis; /*省略标识为省略号*/
}
</style>
</head>
<body>
<p>Very quietly I take my leave,As quietly as I came here;Quietly I wave good-bye;To the rosy clouds in the western sky.
The golden willows by the riverside;Are young brides in the setting sun;Their reflections on the shimmering waves</p>
</body>
</html>
效果
多行文本溢出
基于高度截断
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
width: 200px;
height: 100px;
border: 1px solid black;
position: relative;
overflow: hidden; /*溢出省略*/
padding-right: 10px;
word-break: break-all; /*英文单词换行时进行拆分*/
}
P::after{
content: '...';
position: absolute; /*追加省略标记并且定位与右下角*/
right: 0;
bottom: 0;
overflow: hidden;
}
</style>
</head>
<body>
<p>Very quietly I take my leave,As quietly as I came here;Quietly I wave good-bye;To the rosy clouds in the western sky.
The golden willows by the riverside;Are young brides in the setting sun;Their reflections on the shimmering waves</p>
</body>
</html>
效果
基于行数截断
使用了chrome浏览器私有属性，对其他浏览器兼容不好
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
width: 200px;
display: -webkit-box; /* 必须设置 display 类型为 -webkit-box */
-webkit-line-clamp: 2; /* 设置第几行省略 */
-webkit-box-orient: vertical; /* 设置其元素垂直布局其内容 */
overflow: hidden; /* 溢出省略 */
word-break: break-all; /*英文单词换行时进行拆分*/
}
</style>
</head>
<body>
<p>Very quietly I take my leave,As quietly as I came here;Quietly I wave good-bye;To the rosy clouds in the western sky.
The golden willows by the riverside;Are young brides in the setting sun;Their reflections on the shimmering waves</p>
</body>
</html>
效果
转载：https://blog.csdn.net/weixin_64925940/article/details/125471428
查看评论