말줄임 만들기(...)

<css>를 사용해서 말줄임을 만드는 방법입니다.

한 줄일 때와 여러 줄일 때 CSS가 다릅니다.

IE에서 한줄 말줄임은 지원하지만 여러줄 말줄임은 지원하지 않습니다.

보통 IE에서 여러줄 말줄임일때 overflow:hiden으로 가려 놓습니다.

 

 

1줄 말줄임 CSS

.txt {
width:200px;
/*줄바꿈처리 : 한줄처리(줄바꿈x)*/
white-space:nowrap;

/*튀어나온 것을 없앤다*/
overflow:hidden;

/*글자가 넘을 경우 ...만들기*/
text-overflow:ellipsis;
}

 

2줄 말줄임 CSS

.txt2 {
width:200px;
white-space:normal;
overflow:hidden;
text-overflow:ellipsis;

/* 2줄 말줄임표 추가 */
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

 

 

말줄임 예시 이미지

말줄임 예시(서울 시청 홈페이지 캡쳐)

 

---

개인 공부용으로 만들었습니다. 
다른 분들에게도 도움이 되었으면 좋겠습니다. 
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.

말줄임예시.html

0.00MB