css 한줄 말줄임 처리하기

Posted by Everyharu
2017. 1. 6. 17:06 IT/CSS

html 코딩중에 한줄로 된 글인데 긴 글이 들어갈때가 있다.

이럴때는 말줄임 표시를 해주어야 하는데

몇가지 조건이 필요하다.


1. width 또는 max-width 가 정해져 있어야한다.

2. width 가 정해질 수 있어야 하므로 display : block 또는 inline-block 와 같은 타입들이어야 한다.

3. 말줄임 처리하려는 대상은 당연히 text 형태여야 한다.


display: inline-block;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

width: 150px;


자 이러한 조건이 들어가면 자동으로 말줄임 처리된 모습을 볼 수 있을 것이다.