前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

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

求关注!

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

内容溢出省略号处理

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

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

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

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

省略号后阅读更多

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

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

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

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

什么是jQuery.dotdotdot

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

如何使用它呢?

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

jquery.dotdotdot.js插件引入页面

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

js的方式来使用插件

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

使用还是挺方便的。

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

如果本文对你有点帮助,那么请关注我吧,求关注,求点赞,求转发!!!

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言