单行文本溢出省略
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