如何实现单行/多行文本溢出的省略样式?

34 阅读1分钟

单行文本溢出省略 text-overflow: ellipsis; 规定当文本溢出时,显示省略符号来代表修剪的文本
white-space:nowrap; overflow:hidden;

多行文本溢出省略

  • 基于高度截断
  • 基于行数截断
基于高度截断

伪元素+定位
实现原理:通过伪元素绝对定位到行尾并遮住文字,再通过overflow:hidden隐藏多余文字。
优点:

  • 兼容性好,对各大主流浏览器有好的支持
  • 响应式截断,根据不同宽度做出调整
基于行数截断

一:纯css实现:

  • -webkit-line-clamp: 2:用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性)
  • display: -webkit-box:和1结合使用,将对象作为弹性伸缩盒子模型显示
  • -webkit-box-orient: vertical:和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式
  • overflow: hidden:文本溢出限定的宽度就隐藏内容
  • text-overflow: ellipsis:多行文本的情况下,用省略号“…”隐藏溢出范围的文本

如果文本为一段很长的英文或者数字,则需要添加word-wrap: break-word属性

二:js配合css

参考网站:mp.weixin.qq.com/s?__biz=MzU…