CSS 单/多行文本溢出样式

学习笔记
  437字   1分钟

单行文本溢出省略

核心 CSS 语句

  • overflow: hidden; 文字长度超出限定宽度，则截断超出的内容
  • white-space: nowrap; 规定段落中的文本不进行换行
  • text-overflow: ellipsis; 文本溢出时，用省略号来代替
Demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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 内核的

今天，你学废了吗~