말줄임 생략부호 CSS

white-space(여백)라는 속성이 있다. 값으로 no-wrap, normal, pre가 있다.

 

no-wrap : 부모의 width값이 어떻든 no-wrap(감싸지 않는다.) 즉, 부모의 박스나 윈도우창을 넘어서 글씨는 쭉- 일렬로 나타난다.

normal : 기본값. 부모의 width값에 줄바꿈되어 안착된다. 왼도우창을 줄이면 그에맞에 또, 줄바꿈되어 안착된다.

pre : 코딩할때의 줄바꿈 수를 그대로 적용하고 no-wrap규칙을 따름.

pre-line, pre-wrap : 코딩할때의 줄바꿈 수를 그대로 적용하고 normal규칙을 따름.

 

보통 줄바꿈 처리되지않게 no-wrap을 쓰면서

overflow:hidden, : 설정한 width값 이상의 글씨는 보이지 않게하고

text-overflow:ellipsis(생략) : 넘치는 글씨에 생략부호를 표시하게 하는 CSS를 콤보로 사용한다.

 

한줄로 만들면서 일정구간이상 안보이면서 생략부호 콤보.

width: 100px;

white-space:no-wrap;

overflow:hidden;

text-overflow:ellipsis;

(display:block; 블록태그에서만 가능한 효과) 

 

보통 다른방식으로 구현하는게 일반적이지만 CSS로도 할 수 있다.