말줄임

말줄임을 붙일 수 있는 다양한 방법!

1. 한줄 말줄임

.ellipsis{overflow:hidden; display:block; width:300px; white-space:nowrap; text-overflow:ellipsis;}

display:block;
CSS 말줄임은 block 요소에만 적용 가능하다. 인라인 요소일 경우 display를 block으로 선언해야한다. 인라인일 경우 넓이 값을 지정하지 못 하는데, 넓이 값이 없으면 말줄임의 기준점을 지정하지 못 하기 때문에 block 요소로 지정하는 것이 좋다. 

width:300px;
기준점. 글이 300px를 벗어날 경우 말줄임이 생긴다.  

overflow:hidden;
넓이 300px을 넘어간 글자들을 안보이게 처리한다. 이 속성이 없을 경우 기준점을 넘어가는 글자를 어떻게 처리해야할지 인식하지 못 하므로 말줄임이 생기지 않는다. 

white-space:nowrap;
여러 줄의 글을 강제로 한 줄로 만든다. 

text-overflow:ellipsis;
 (…) 말줄임을 추가한다.