4种方法实现单行、多行——文本溢出显示省略号

一、单行溢出
在前端基础,单行文本的溢出显示省略号,这种做法我们通常用text-overflow来实现,然后给元素定宽,超出隐藏,具体如下面一段代码:

4种方法实现单行、多行——文本溢出显示省略号

显示效果:4种方法实现单行、多行——文本溢出显示省略号

二、那么多行文本溢出呢?具体代码如下:


4种方法实现单行、多行——文本溢出显示省略号显示效果:

4种方法实现单行、多行——文本溢出显示省略号

说明:
1、该方法不支持ff,主要是-webkit-line-clamp这一属性不是标注的一部分,可能是webkit内部使用的,或者被弃用的。根据存在即合理的原则,也被很多人发现,不妨试一试。

2、display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示

3、-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式

三、这也是多行文本溢出,采用的:after来解决的。具体代码如下

4种方法实现单行、多行——文本溢出显示省略号显示效果如图:

4种方法实现单行、多行——文本溢出显示省略号说明:该方法适用范围广,但在文字未超出行的情况下也会出现省略号,可结合js优化该方法。所以的注意一下几点:
1、将height设置为line-height的整数倍,防止超出的文字露出。

2、给texts::after添加渐变背景可避免文字只显示一半。

3、由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

四、我们能不用js的方法来实现了?答案也是可以的 。具体代码如下:

html 代码:

4种方法实现单行、多行——文本溢出显示省略号css代码:

4种方法实现单行、多行——文本溢出显示省略号js代码:

4种方法实现单行、多行——文本溢出显示省略号效果如图:

4种方法实现单行、多行——文本溢出显示省略号

通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度,到达效果,这种方法可以兼容各种浏览器。

posted @ 2016-01-12 11:32 Mr.Leo 阅读(...) 评论(...) 编辑 收藏