《文本溢出截断省略》方案合集

本文首发于政采云前端团队博客：可能是最全的 “文本溢出截断省略” 方案合集

https://www.zoo.team/article/text-overflow

单行文本溢出省略

核心CSS语句

overflow:hidden;
/*设置文字在一行，不换行*/
white-space:nowrap; 
/*文本溢出时，显示省略符号来代表被修剪的文本*/
text-overflow:ellipsis;

• 优点

  • 无兼容性问题
  • 响应式截断
  • 文本溢出范围才显示省略符号，否则不显示省略号

• 短板

  • 只支持单行文本截断

适应场景

• 适用单行文本溢出省略号的情况

Demo

  
这是一段很长很长的文本

多行文本溢出省略

纯CSS实现方案

/*限制在一个块元素内显示的行数，2表示最多显示2行，为了实现该效果，他需要组合其他的webkit属性*/
-webkit-line-clamp:2;
/*和上面的结合使用，将对象作为弹性伸缩盒子模型显示*/
display:-webkit-box;
/*设置或检索伸缩盒子的子元素的排列方式*/
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis

• 优点
  • 响应式截断
  • 文本溢出范围才显示省略号，否则不显示省略号
  • 省略号显示位置刚好

• 短板
  • 兼容性一般：-webkit-line-clamp属性只有webkit内核的浏览器才支持

[email protected]

适用场景

• 多适用于移动端页面 ，因为移动设备浏览器更多是基于Webkit内核

 
这是一段很长很长的文本

基于Javascript的实现方案

• 优点

  • 无兼容性问题
  • 响应式截断
  • 文本溢出范围才显示省略号，否则不显示省略号

• 短板

  • 需要JS实现，背离展示和行为相分离原则
  • 文本为中英文混合时，省略号显示位置略有偏差

适用场景

• 适用于响应式截断，多行文本溢出省略的情况

Demo

当前仅适用于文本为中文，若文本中有英文，可自行修改

多行文本溢出省略（按照高度）

• 多行文本溢出不显示省略号

  • 核心CSS语句

overflow:hidden;
line-height:20px;
max-height:40px;

• 优点

  • 无兼容性问题
  • 响应式截断

• 短板

  • 单纯截断文字，不展示省略号，观感上较为生硬

使用场景

• 适用于文本溢出不需要省略号的情况

    
这是一段很长的文本

伪元素 + 定位实现多行省略

• 核心 css 语句

  • position: relative; （为伪元素绝对定位）
  • overflow: hidden; （文本溢出限定的宽度就隐藏内容）
  • position: absolute;（给省略号绝对定位）
  • line-height: 20px; （结合元素高度,高度固定的情况下,设定行高, 控制显示行数）
  • height: 40px; （设定当前元素高度）
  • ::after {} （设置省略号样式）

• 优点

• 无兼容性问题
• 响应式截断

• 短板
  • 无法识别文字的长短，无论文本是否溢出范围，一直显示省略号
  • 省略号显示可能不会刚刚好，有时会遮住一半文字

适用场景

• 适用于对省略号效果要求较低，文本一定会溢出元素的情况

    
这是一段很长的文本

利用 Float 特性，纯 CSS 实现多行省略

• 核心 CSS 语句

  • ine-height: 20px；（结合元素高度,高度固定的情况下,设定行高, 控制显示行数）
  • overflow: hidden；（文本溢出限定的宽度就隐藏内容）
  • float: right/left；（利用元素浮动的特性实现）
  • position: relative；（根据自身位置移动省略号位置, 实现文本溢出显示省略号效果）
  • word-break: break-all；（使一个单词能够在换行时进行拆分）

• 优点

  • 无兼容问题
  • 响应式截断
  • 文本溢出范围才显示省略号，否则不显示省略号

• 短板

  • 省略号显示可能不会刚刚好，有时会遮住一半文字

适用场景

+ 适用于对省略效果要求较低，多行文本响应式截断的情况

    
这是一段很长的文本