https://www.xuanmo.xin/1289.html

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

发布于 分类: Other 7 2041

第一种给出固定宽度,结合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展示

作者专栏:Xuanmo

前端爱好者,热爱前端开发,欢迎和我成为朋友。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
表情
贴图
表情加载中...

换一张

已经没有了!