넘치는 글자 ...으로 처리하기

게시판이나 공지사항에서 제목이 한줄이 넘어갈때 ...으로 나오는 방법은

css로 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 85%;} > width값 중요, 요소가 inline요소일때는 block으로 처리해줘야 한다.

 

이렇게 주면

ex) 제목이 한줄이 넘어가게 하고 싶다면 이...

이런식으로 처리가 가능하다.

 

하지만 두줄 이상일때는 어떻게 해야할까?

그때는 {

overflow: hidden;

text-overflow: ellipsis;

word-wrap: break-word;

display: -webkit-box;

-webkit-line-clamp: 3;  >> 4줄 처리하고 싶으면 4로 적는다. 원하는 줄 수로 변경 가능

-webkit-box-orient: vertical;

 

/* webkit을 지원하지 않는 브라우저를 대비하여 height와 line-height를 설정한다. */

/* line-height가 1.2em이면 3줄로 처리하기때문에 height값은 1.2*3 = 3.6em으로 처리한다. */

height: 3.6em; 

line-height: 1.2em;

}

 

**  white-space :  요소가 공백 문자를 처리하는 법을 지정. nowrap은 줄바꿈 하지 않고 한줄로 나오게 한다.

** text-overflow: ellipsis 넘치는 글자를 ...로 표시한다.