javascript / 특정 글자수가 넘어가면 넘어가는 글자는 자르고 마지막에 대체문자 처리

javascript에서 특정 글자수가 넘어가면 화면의 UI가 깨지는 경우가 발생한다.

 

예를 들면 아래와 같이 메인 화면에

 

배너 게시판 영역을 만들면 생각보다 작은 영역이 생기고

 

그 영역에 표시할 수 있는 글자수는 한정적이다.

 

이미지는 대전시청 홈페이지에서 발췌했습니다.

 

 

이때 화면이 깨지지 않을 정도의 글자수를 파악한 뒤 나머지 글자는 대체문자(... , 등)로 처리한다.

 

내용 및 사용방법은 주석으로 대체한다.

    /** @param txt<br/>
     *  @param len : 생략시 기본값 20<br/>
     *  @param lastTxt : 생략시 기본값 "..."<br/>
     *  @returns 결과값
     * <br/>
     * <br/>
     * 특정 글자수가 넘어가면 넘어가는 글자는 자르고 마지막에 대체문자 처리<br/>
     *  ex) 가나다라마바사 -> textLengthOverCut('가나다라마바사', '5', '...') : 가나다라마...<br/>
     */
    function textLengthOverCut(txt, len, lastTxt) {
        if (len == "" || len == null) { // 기본값
            len = 20;
        }
        if (lastTxt == "" || lastTxt == null) { // 기본값
            lastTxt = "...";
        }
        if (txt.length > len) {
            txt = txt.substr(0, len) + lastTxt;
        }
        return txt;
    }