一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

2017/07/23 21:43
阅读数 65

就如下图一样,我们会开发者经常遇到:

一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

内容溢出省略号处理

如何才能内容溢出省略呢? 我们常用的方式是:text-overflow:ellipsis 来解决,如下所示:

一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

CSS实现内容溢出显示省略号

是不是很简单,那么这篇文章,要说的是,其它情况下,需要省略号的问题。

比如:省略号后更多;内容中有HTML标记;内容容器的大小会自适配等情况。我们通过下图来了解:

一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

省略号后阅读更多

一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

内容中HTML标记的截断来省略

一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

让截取省略更人性化,更可读。

一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

适用适配的自动省略号截取

那么如何统一来处理这些情况呢, 这里,推荐一个jquery.dotdotdot插件(从名字上就好记,3个dot点)

什么是jQuery.dotdotdot

它是一个用于多行内容省略号问题的高级跨浏览器的jQuery插件。

如何使用它呢?

你可以到github上搜索:jQuery.dotdotdot,来引入到页面中。

一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

jquery.dotdotdot.js插件引入页面

一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

css类的方法来应用到元素上

一次解决你的所以省略号问题,不仅仅是:text-overflow:ellipsis

js的方式来使用插件

两种方式来使用插件:添加指定的Class类和Js初始化指定的元素。

使用还是挺方便的。

至此,就简单介绍完了这个插件,功能比较精准,也比较小,也许你通过css或者js就能实现,但是,一个统一的,可以复制的功能,往往可以提高整个开发团队的综合效率。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部