CSS 单/多行文本溢出样式
程序员文章站
2022-07-15 14:50:12
...
单行文本溢出省略
核心 CSS 语句
- overflow: hidden; 文字长度超出限定宽度，则截断超出的内容
- white-space: nowrap; 规定段落中的文本不进行换行
- text-overflow: ellipsis; 文本溢出时，用省略号来代替
Demo
<style>
div {
width: 150px;
height: 50px;
border: 1px solid red;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<body>
<div>
这是一段很长的文本这是一段很长的文本
</div>
</body>
效果图
多行文本溢出省略
核心语句
- -webkit-line-clamp: 2; 限制在一个块元素显示的文本的行数，2 表示最多显示两行，为了实现该效果，需要组合其他的 webkit 属性
- -webkit-box-orient: vertical; 和 1 结合使用，设置或检索伸缩盒对象的子元素的排列方式
- display: -webkit-box; 和 1 结合使用，将对象作为弹性伸缩盒子模型显示
- overflow: hidden; 文字长度超出限定宽度，则截断超出的内容
- text-overflow: ellipsis; 文本溢出时，用省略号来代替
Demo
<style>
div {
width: 150px;
height: 40px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
}
</style>
<body>
<div>
这是一段很长的文本这是一段很长的文本这是一段很长的文本
</div>
</body>
效果图
这样就很容易的实现了多行文本溢出显示省略号的效果，不过这个方案有个不好的点就是兼容性不好
-webkit-line-clamp 属性只有 webkit 内核的浏览器才支持，多适用于移动端页面，移动端的浏览器更多是基于 WebKit 内核的
今天，你学废了吗~
阅读原文：小鑫の随笔
上一篇： 带你手撕Java虚拟机栈（手把手实战）
下一篇： 手把手教你栈溢出入门