需求:消息文件名过长,显示部分
- 写一个函数,获取字符串长度,截取部分
function getFileName(fileName){
var showFileName ='';
var disLength = fileName.length;
var substringC = 6;
var nameLength = 0;
var cutIndex = 0;
for(var i=0; i<disLength; i++) {
if(escape(fileName[i]).indexOf("%u")<0){//不是中文
nameLength += 1;
}
else{//中文
nameLength += 2;
}
if(nameLength > 12){
cutIndex = i;
break;
}
}
console.log(nameLength);
if (nameLength > substringC){
showFileName = fileName.replace(/^(^.{15})(.+)(.{2}\.+\w+$)$/g, "$1...$3");
}else {
showFileName = fileName;
}
return showFileName;
}
- 调用函数,显示文件
let showFileName = getFileName(msg.mss);
html +=
'<span id="downLoadMsg" class="msgFileContent" data-menu="selMsg" data-data="' + MsgNum + ',' +
msgType +
'"<a href="http://' + nginxIp + ':' + msg.url +'"><span class="downFiles">'+showFileName+'</span><img class="msgFilesImg" src="./images/message/docImg.png" alt=""></a></span>';
效果
使用css换行显示
我说说打瞌睡党风建设打火机说说色儿
a{
display:block/inline-block;
width:100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
b{
display:inline; //正确
display:inline-block //错误,b标签里的字超出不能显示省略号(...)
}
//一行
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
//两行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;