字太多用...代替的方法(两种)

 更新时间:2017年03月15日 10:45:31   作者:艾米  
本文主要介绍了字太多用...代替的两种方法。具有很好的参考价值。下面跟着小编一起来看下吧

Jquery方法:

$(function() {
        $(".head-pic .user-name").each(function() {
          var maxwidth = 4;
          if ($(this).text().length > maxwidth) {
            var b = $(this).children().is("a");
            if (b) {
              $(this).children().text($(this).children().text().substring(0, maxwidth) + "...");
            } else {
              $(this).text($(this).text().substring(0, maxwidth));
              $(this).text($(this).text() + "..");
            }
          }
        });
      });

css方法:

overflow: hidden;
white-space:nowrap; 
text-overflow:ellipsis; // IE 
-o-text-overflow: ellipsis; //Opera
-icab-text-overflow: ellipsis; //iCab 
-khtml-text-overflow: ellipsis; //Konqueror Safari 
-moz-text-overflow: ellipsis; //Firefox,mozilla 
-webkit-text-overflow: ellipsis;  //Safari,Swift

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • jQuery+CSS3实现树叶飘落特效

    jQuery+CSS3实现树叶飘落特效

    本文给大家分享的是一段使用jQuery+CSS3实现树叶飘落特效的代码,效果非常不错,分享给大家,希望大家能够喜欢
    2015-02-02
  • Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)

    Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)

    前段时间发布了Jquery类库1.4版本,使用者也越来越多,为了方便大家对Jquery的使用,下面列出了一些Jquery使用技巧。
    2010-03-03
  • jQuery仿天猫实现超炫的加入购物车

    jQuery仿天猫实现超炫的加入购物车

    jquery仿照天猫购物车收藏商品特效,非常实用的一款商品加入购物车特效,动画效果非常炫丽。
    2015-05-05
  • JQuery控制DIV的选取实现方法

    JQuery控制DIV的选取实现方法

    下面小编就为大家带来一篇JQuery控制DIV的选取实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • EasyUI学习之DataGird分页显示数据

    EasyUI学习之DataGird分页显示数据

    这篇文章主要介绍了EasyUI学习之DataGird分页显示数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jQuery获取同级元素的简单代码

    jQuery获取同级元素的简单代码

    下面小编就为大家带来一篇jQuery获取同级元素的简单代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • jQuery实现定位滚动条位置

    jQuery实现定位滚动条位置

    基于jQuery实现滚动条滚动到子元素位置以此来定位滚动条位置,下面是小编给大家带来的实现代码,代码比较简单,需要的朋友可以参考下
    2016-08-08
  • jQuery提示效果代码分享

    jQuery提示效果代码分享

    这里给大家分享几段JQuery提示效果的代码,非常的简单实用,有需要的小伙伴直接拿走吧
    2014-11-11
  • jquery+easeing实现仿flash的载入动画

    jquery+easeing实现仿flash的载入动画

    本文主要给大家讲述的是如何使用jquery+easeing实现仿flash的载入动画的方法,附上示例代码,非常细致全面,这里推荐给大家,希望对大家熟练使用jQuery有所帮助。
    2015-03-03
  • jQuery图片切换动画效果

    jQuery图片切换动画效果

    这篇文章主要介绍了jQuery图片切换动画效果,处理动画延迟,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论