긴문장을 (...) 처리하여 주는 text-overflow

아래 그림과 같이 [팀플레이스 이름길이체크용 팀플레이...] < -- 요렇게 긴문장으로 text 가 영역을 벗어 나거나 깨질때.....

 

### css

text-overflow : clip; 

text-overflow : ellipsis;

text-overflow : string;

clip 속성 - 고정폭을 벗어나는 문자를 잘라냄

ellipsis 속성 - 고정폭을 벗어나는 문자를 (...) 처리 해줌

stnirg 속성 - 대체문자를 붙여줌

- 적용 시 주의사항 

1 . 위의 css를 적용하는 영역은 width가 고정폭인 조건 이어야 합니다.

2 . ellipsis 사용시 CSS 와 글꼴 및 브라우저 마다 표현되는 방식에 차이가 있습니다.

3.  적용 시에는 아래의 두 속성도 함께 넣어 줍니다.

overflow:hidden; - 고정폭을 넘어가는 text숨김.

white-space:nowrap; - 고정폭이라도 자동으로 줄바꿈되지 않도록 함.

그럼 아래와 같이 고정폭을 넘어가는 경우 (...) 처리가 됩니다.

참고 URL

https://developer.mozilla.org/en-US/docs/CSS/text-overflow

http://quirksmode.org/css/user-interface/textoverflow.html

http://blog.naver.com/PostView.nhn?blogId=goodleedw&logNo=30151600912

http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

출처 : http://blog.naver.com/mickeyh21/10163725143