Text Ellipsis

재인용 자료 - 클클이와 함께하는 웹세상

원인용 자료

말줄임 표시하기. text-overflow:ellipsis(말줄임) / clip(자르기)

Source

							.ellipsis {								
								overflow:hidden; 
								white-space:nowrap; 
								text-overflow:ellipsis;  /* another value: clip (자르기) */
							}
						

주의사항

IE, Safari, Chrome 에서는 구현되나 Firefox에서는 ellipsis를 줘도 clip처럼 작동합니다.
FF에 말줄임을 넣으려면 XUL description 요소를 이용해서 할 수 있습니다. CSS에서 XBL 바인딩을 지원하기 때문에 이를 통해 XML을 호출하게 됩니다.

FireFox 대응

ellipsis.xml 파일 저장

								<?xml version="1.0"?>
								
									
										
											
												
											
										
									
								
						

css에서 -mos-binding을 통해 XBL 바인딩 호출

							.ellipsis {								
								overflow:hidden; 
								white-space:nowrap; 
								text-overflow:ellipsis; 
								-moz-binding: url('ellipsis.xml#ellipsis');
							}
						

바인딩을 사용하기.
css 파일과 동위에 xml파일을 저장하고. ellipsis파일내의 id가 ellipsis인 element를 바인딩하고 있다.



Multi-Line Text Ellipsis

-webkit-line-clamp 와 -webkit-box-orient:vertical을 이용하여 여러줄 말줄임을 구현하는 방법

출처: 두줄이상 여러줄 멀티라인 말줄임 처리(-webkit-line-clamp) 출처: CSS를 통한 멀티라인 말줄임 처리와 폴백

							.ellipsis{
								 overflow: hidden;
								 text-overflow: ellipsis;
								 display: -webkit-box;
								 -webkit-line-clamp: 3; /* 라인수 */
								 -webkit-box-orient: vertical;
								 word-wrap:break-word; 
							} 
						


웹킷엔진을 사용하지 않는 브라우저에서는 문제가 생기므로, height 값을 정해 줘야 하는데 line-height와 자르려고 하는 라인수를 계산해서 넣어준다.

							.ellipsis{
								 overflow: hidden;
								 text-overflow: ellipsis;
								 display: -webkit-box;
								 -webkit-line-clamp: 3; /* 라인수 */
								 -webkit-box-orient: vertical;
								 word-wrap:break-word; 
								 line-height: 1.2em;
								 height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
							}