jQuery / Script : 긴 글에 대한 '...', 말줄임처리 (dotdotdot.js)

jQuery / Script : 긴 글에 대한 '...', 말줄임처리 (dotdotdot.js)

웹작업을 하다보면 말줄임('...')처리를 해야할 경우가 많이 있다.

보통 디자이너는 시안을 만들때 해당 가로사이즈에 맞게 예제텍스트를 넣어 작업을 하기때문에 데이터가 길어질 경우 

레이아웃이 깨지는 경우가 있다.

아래 경우를 보자.

<사진 = 네이버메인 뉴스 섹션 캡쳐>

위 캡쳐는 네이버 메인페이지 뉴스섹션의 캡쳐본이다. 

텍스트가 특정 너비를 넘어갈 경우 '...'로 텍스트를 숨기도록 css 처리를 해놓았다.

<사진 = 네이버 메인 뉴스섹션의 스타일 제거 후 캡쳐>

위 캡쳐이미지는 개발자도구를 이용해서 해당하는 style을 제거한 모습이다.

만약 해당 css처리를 안해놓는다면 데이터가 길어지면 위와같이 나올 것이다. 

그래서 클라이언트가 "10자이상 절대 안넘어가요."라고 못을 밖아도

 만약의 경우를 대비하여 아래와같이 style처리는 해두는 것이 좋다.

	
.box {width:500px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

그런데 가끔 한줄이 아니라 여러줄 텍스트가 들어가는 박스의 

높이에 맞게 '...'처리를 할 수 없느냐는 얘기를 듣는다.

여러줄의 문장 말줄임의 CSS로는 불가능하다.

이럴땐 개발에서 데이터량에 따라 '...'처리를 할 수 있는데, 

이는 글자수에 따라 처리하는 거기때문에 국문,영문에 따라 글자를 자르는 타이밍(?)이 애매해질 경우가 있다. 

(물론 국/영문 분기처리를 할 수 있겠지만)

찾아보니 아주 간단한 방법이 있었다.

이름하야 dotdotdot.js 이름도 참 마음에 든다.ㅋㅋㅋ

거기다가 사용방법도 너무너무 간단하다.

/* header에 jquery와 dotdotdot.js를 로드 */


// 셀렉터.dotdotdot();

// html/css

	한국사 과목 교과서의 국정화 관련 논란은 2003년 한국근현대사 교과서의 발행 검정화와 어쩌구저쩌구 ~~~

위와같이 javascript, html, css를 작성해주면 자동으로 해당 박스의 높이값을 계산하여 적정한 곳에서 문장을 컷('...') 해준다.

dotdotdot.js의 공식사이트는 아래url로 접속가능하다. (dotdotdot.js파일도 다운로드 가능)

http://dotdotdot.frebsite.nl/

아래 url은 내가 예제로 만든 것을 볼 수 있다.

(블로그 내에서 소스로 설명하기가 어려워 따로 html을 만들었다. 소스보기 해서 보면 쉽게 이해가 가능하다.)

http://dung8524.dothome.co.kr/test/dotdotdot/