文字超出显示省略号(css与js方法)

轩陌

分类: 解决问题 5422 7

第一种给出固定宽度,结合css样式控制:


overflow: hidden;//超出隐藏
white-space: nowrap;//让文字不换行显示
text-overflow: ellipsis;//文本超出显示省略号

 
第二种通过js方法实现,下面例子通过给Object原型追加一个属性实现:


Object.prototype.ellipsis = function( length ){
  var str = '';
  for( var i = 0; i < this.innerHTML.length; i++ ){
    if( this.innerHTML.length > length ){
      str = this.innerHTML.substring( 0 , length ) + '...';
      this.innerHTML = str;
    }
  }
}

 
第三种jQuery方法:


function ellipsis( obj , length ){
  var str = '';
  obj.each(function(){
    if( obj.text().length > length ){
      str = obj.text().substring(0 , length) + '...';
      obj.text( str );
    }
  });
}

DEMO展示

  • 10人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
css超出显示省略号

作者简介: 轩陌

打赏

生命的意义在于折腾,一直努力成长中,期待梦想实现的那刻。

共 7 条评论关于 “文字超出显示省略号(css与js方法)”

Loading...