CSS Flex 텍스트 말 줄임 처리

자바스크립트

/**
 * 이미지 파일 삽입
 * @param {Array} strImg 파일 객체
 * @param {String} objID 
 * @param {String} SVRFIL 저장 파일명
 * @param {String} ORGFIL 원본 파일명
 * @param {String} TBLCOD 
 * @param {String} strFILSIZ 파일 용량
 * @param {String} btnDelFlag 삭제 버튼 'Y' 경우 표시
 */
function setImageFile(strImg, objID, SVRFIL, ORGFIL, TBLCOD, strFILSIZ, btnDelFlag) {
   strImg.push(`
   <div style="width: 100px; margin: 10px 20px 0 0;">
      <img src="${gImgUrl}${TBLCOD}/${SVRFIL}" style="width: 100%; height: 100px;" onClick="Modal_img_view('${gImgUrl}','${SVRFIL}','${TBLCOD}')"/>
      <div style="display: flex;">
         <a class="file-name" onclick="goDownloadCommon('${TBLCOD}', '${ORGFIL}', '${SVRFIL}');">${ORGFIL}</a>
   `);
   if (btnDelFlag == 'Y') {
      strImg.push(`
         <button type="button" class="btn btn-xs btn-default" style="height: 22px;" onclick="goDeleteFile('${TBLCOD}', '${SVRFIL}', '${objID}');">X</button>`);
   }
   strImg.push(`
      </div>
      <span style="padding: 4px 4px; color: #999;">(${strFILSIZ})</span>
   </div>
   `);
}

/**
 * 이미지 이외 파일 삽입
 * @param {Array} strFile 파일 객체
 * @param {String} objID 
 * @param {String} SVRFIL 저장 파일명
 * @param {String} ORGFIL 원본 파일명
 * @param {String} TBLCOD 
 * @param {String} strFILSIZ 파일 용량
 * @param {String} btnDelFlag 삭제 버튼 'Y' 경우 표시
 */
function setReadFile(strFile, objID, SVRFIL, ORGFIL, TBLCOD, strFILSIZ, btnDelFlag) {
   strFile.push(`
   <div style="display:flex; width: 500px; padding: 3px 0;">`);
   if (btnDelFlag == 'Y') {
      strFile.push(`
      <button type="button" class="btn btn-xs btn-default" style="height: 22px; margin-right: 3px;" onclick="goDeleteFile('${TBLCOD}', '${SVRFIL}', '${objID}');">X</button>`);
   }
   strFile.push(`
      <a class="file-name" onclick="goDownloadCommon('${TBLCOD}', '${ORGFIL}', '${SVRFIL}');">${ORGFIL}</a>
      <span style="padding: 3px 3px; color: #999;">(${strFILSIZ})</span>`);
   if (isPDFFile(SVRFIL)) { // pdf 파일의 경우
      strFile.push(`
      <button type="button" class="btn btn-xs btn-success" style="height: 22px;" onclick="window.open('${gImgUrl}${JOBGBN}/${SVRFIL}');">미리보기</button>`);
   }
   strFile.push(`
   </div>`);
}

 

CSS

.file-name {
     cursor: pointer;
     padding: 3px 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

 

 

파일 이름이 길면 옆으로 쭉 길게 나오는 부분을 생략 점점점 으로 표시를 변환 처리