티스토리 뷰

웹 퍼블리싱/HTML, CSS

말줄임 만들기(...)

사용자 용고리 2019. 7. 1. 09:26

<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

댓글
댓글쓰기 폼