Javascript & JQuery & CSS

먼저 overflow에 대해서 간단히 설명을 하자면,,,
지정한 영역을 넘었을대 어떻게 처리할 것이냐를 정해주는 태그입니다.

- visible : 영역을 넘어가도 보여줍니다. 기본값입니다.
- hidden : 영역을 넘어간 부분은 보이지 않습니다.
- scroll : 영역을 넘어가든 넘어가지 않든 스크롤바가 나옵니다.
- auto : 영역을 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다.

여기에 text-overflow:ellipsis; 을 더하면 넘치는 글자를 아주 쉽게 자를 수 있습니다.

<style>
.box {width:250px; border:1px solid #000; padding:10px;}
</style>

<div class="box">
     안녕하세요. overflow에 대해서 테스트 포스팅을 하고 있습니다.
</div>

위와 같이 코딩을 하면 내용이 표시가 됩니다.

위의  box 넓이 250px 를 넘어갈 경우 (...) 표시를 하고 싶을 경우 ellipsis 속성을 적어 주면 됩니다.

.box {width:250px; border:1px solid #000; padding:10px;overflow:hidden; white-space: nowrap;text-overflow:ellipsis;}

clip의 경우 글자가 요소를 넘어서면 짤리도록 처리가 되고, ellipsis는 생략 부등호(..)으로 표시가 됩니다.

(text-overflow를 사용할 경우에는 overflow:hidden, white-space: nowrap; 과 함께 사용 합니다.)