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) + '...'); } }