文本换行-CSDN博客

1.单行文本超出，显示省略号

div{
display:block;
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
}

2.自动换行

div{ 
word-wrap: break-word; 
word-break: normal; 
}

3.强制英文单词断行

div{
word-break:break-all;
}

4.强制不换行

div{
white-space:nowrap;
}

二、多行文本超出，显示省略号

1、如果用BUI框架HForm的store，写法如下：

{title : '标题',elCls : 'center',dataIndex : 'title',width:180,
    renderer:function(value){
      if(value.length > 20){
        var newValue=value.substring(0, 19) +'...';
        return newValue;
      }
      return value;

}}

2、如果用KISSY点击事件，写法如下：

S.one('.row').each(function(){
var maxwidth=20;
if(S.one(this).text().length>maxwidth){
S.one(this).text(S.one(this).text().substring(0,maxwidth));
S.one(this).html(S.one(this).html()+'...');
}
});

3、如果用Jquery点击事件，写法如下：

$( '.row ').each(function(){
var maxwidth=20;
if($ (this).text().length>maxwidth){
$ (this).text($ (this).text().substring(0,maxwidth));
$ (this).html($ (this).html()+'...');
}
});

4、如果用javascript，写法如下：

var $strtext = $('.strtext');
for(var i = 0; i < $strtext.length; i++){
    var strtextText = $strtext.eq(i).text();
    if(strtextText.length > 51){
        $strtext.eq(i).text(strtextText.substring(0, 51) + '...');
    }
}

转载于:https://www.cnblogs.com/gwzzllw/p/6046158.html