单行文字、多行文字溢出省略号显示
程序员文章站
2022-07-15 14:59:18
...
1.单行文本
满足三个条件：
- 强制在一行内显示文本
- 超出的部分隐藏
- 文字用省略号代替超出的部分
转换为代码：
/*条件一*/
white-space:nowrap;
/*条件二*/
overflow:hidden;
/*条件三*/
text-overflow:ellipsis;
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>省略号</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
display: block;
height: 30px;
width: 150px;
line-height: 30px;
background-color: gray;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>
提笔想念的人是你，夜深面前的人是你，岁月纷扰回忆是你，前路漫漫所爱是你。
</p>
</body>
</html>
注意：要想出现省略号，一个合适的宽度也是必须的。宽度过大，它能装下所有文字，自然不会出现省略号。
2. 多行文字
满足下面条件：
- 溢出隐藏
- 超出部分省略号显示
- 弹性伸缩盒子显示
- 限制在一个块元素显示的文本行数
- 设置伸缩盒子对象的子元素的排列方式
转换代码：
/*条件一*/
overflow:hidden;
/*条件二*/
text-overflow:ellipsis;
/*条件三*/
display:-webkit-box;
/*条件四*/
-webkit-line-clamp:2;
/*条件五*/
-webkit-box-orient:vertical;
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>省略号</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
display: -webkit-box;
width: 100px;
height: 66px;
background-color: gray;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
提笔想念的人是你，夜深面前的人是你，岁月纷扰回忆是你，前路漫漫所爱是你。
提笔想念的人是你，夜深面前的人是你，岁月纷扰回忆是你，前路漫漫所爱是你。
提笔想念的人是你，夜深面前的人是你，岁月纷扰回忆是你，前路漫漫所爱是你。
</div>
</body>
</html>
注意：盒子的高度也很重要，如果过大，则会显示第四(…)行。
例如，我将盒子高度设置为80px：
省略号下面的行还会显示，所以高度设置是很重要的。
多行显示在不同浏览器存在兼容性问题，因此更好的是让后端来实现多行文字省略号效果。
上一篇： a 标签去边框 和 调颜色
下一篇： vue css 多行打点展示