栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如果内容太宽,请在HTML标记中插入省略号(...)

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如果内容太宽,请在HTML标记中插入省略号(...)

我有一个可以在FF3,Safari和IE6 +中使用单行和多行文本的解决方案

.ellipsis {    white-space: nowrap;    overflow: hidden;}.ellipsis.multiline {    white-space: normal;}<div  >Lorem ipsum dolor sit amet, consectetur adipisicing elit</div><div  >Lorem ipsum dolor sit amet, consectetur adipisicing elit</div><script type="text/javascript" src="/js/jquery.ellipsis.js"></script><script type="text/javascript">$(".ellipsis").ellipsis();</script>

jquery.ellipsis.js

(function($) {    $.fn.ellipsis = function()    {        return this.each(function()        { var el = $(this); if(el.css("overflow") == "hidden") {     var text = el.html();     var multiline = el.hasClass('multiline');     var t = $(this.cloneNode(true))         .hide()         .css('position', 'absolute')         .css('overflow', 'visible')         .width(multiline ? el.width() : 'auto')         .height(multiline ? 'auto' : el.height())         ;     el.after(t);     function height() { return t.height() > el.height(); };     function width() { return t.width() > el.width(); };     var func = multiline ? height : width;     while (text.length > 0 && func())     {         text = text.substr(0, text.length - 1);         t.html(text + "...");     }     el.html(t.html());     t.remove(); }        });    };})(jQuery);


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/432319.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号