【CSS3】------- CSS3实现文字超出显示省略号（css与js方法）

文字超出显示省略号（css与js方法）（转载处:https://www.xuanmo.xin/details/1289）

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

overflow: hidden;//超出隐藏
white-space: nowrap;//让文字不换行显示
text-overflow: ellipsis;//文本超出显示省略号
CSS
 
第二种通过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;
    }
  }
}
JavaScript
 
第三种jQuery方法：

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