纯CSS实现“文本溢出截断省略”的几种方法 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下纯CSS实现“文本溢出截断省略”的几种方法,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去“稀松平常”,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,都有哪些实现方案?他们之间的差异性和场景适应性又是如何?

一般来说,在做这样文字截断效果时我们更多是希望:

<李>

兼容性好,对各大主流浏览器有好的支持

<李>

响应式截断,根据不同宽度做出调整

<李>

文本超出范围才显示省略号,否则不显示省略号

<李>

省略号位置显示刚好

基于上述的准则、下面我们通过编码实践,给出一些答案。

<强>单行文本溢出省略

<强>核心CSS语句

<李>

溢出:隐藏;(文字长度超出限定宽度,则隐藏超出的内容)

<李>

空白:nowrap;}(设置文字在一行显示,不能换行)

<李>

文本溢出:省略号;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

<>强优点

<李>

兼容性好,对各大主流浏览器有好的支持

<李>

响应式截断,根据不同宽度做出调整

<李>

文本溢出范围才显示省略号,否则不显示省略号

<李>

省略号位置显示刚好

<强>短板

<李>

只支持单行文本截断,并不支持多行

<>强适用场景

<李>

适用于单行文本溢出显示省略号的情况

演示

& lt; div 类=癲emo"比; 　　,,,,,床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光　　& lt;/div> .demo { 　　,,空白:nowrap;} 　　,,溢出:隐藏。　　,,文本溢出:省略; 　　}

效果示例

纯CSS实现“文本溢出截断省略”的几种方法

<强>多行文本溢出省略(-webkit-line-clamp)

<强>核心CSS语句

<李>

溢出:隐藏;(文本溢出限定的宽度就隐藏内容)

<李>

-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数,2表示最多显示2行。为了实现该效果,它需要组合其他的WebKit属性)

<李>

显示:-webkit-box;(和-webkit-line-clamp: 2;结合使用,将对象作为弹性伸缩盒子模型显示)

<李>

-webkit-box-orient:垂直的;(和-webkit-line-clamp: 2;结合使用,设置或检索伸缩盒对象的子元素的排列方式)

<李>

文本溢出:省略号;(多行文本的情况下,用省略号”和白马王子“隐藏溢出范围的文本)
,

<>强优点

<李>

响应式截断,根据不同宽度做出调整

<李>

文本溢出范围才显示省略号,否则不显示省略号

<李>

浏览器原生实现,所以省略号位置显示刚好

<强>短板

兼容性一般:-webkit-line-clamp属性只有WebKit内核的浏览器才支持

纯CSS实现“文本溢出截断省略”的几种方法

<>强适用场景

多适用于移动端页面,因为移动设备浏览器更多是基于WebKit内核演示

& lt; div 类=癲emo"比; 　　,,,,,床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光　　& lt;/div> .demo { 　　,,显示:-webkit-box; 　　,,溢出:隐藏。　　,,-webkit-line-clamp: 2; 　　,,-webkit-box-orient:垂直的; 　　}

效果示例

纯CSS实现“文本溢出截断省略”的几种方法

<强>多行文本溢出省略(伪元素+定位)

<强>核心CSS语句