vue聊天功能模块（七）js文件名过长部分显示

需求：消息文件名过长，显示部分

• 写一个函数，获取字符串长度，截取部分

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;