[css] 말줄임 처리

말줄임 처리 방식
- 웹 개발이나 스크립트 단에서 글자수를 기준으로 자르는 방법
- CSS를 이용해 정해진 너비 값을 기준으로 자르는 방법

CSS를 이용한 말 줄임 처리 방법

두 줄 이상의 말줄임 방법

-webkit-line-clamp 속성의 경우, webkit  전용이라(크롬, 사파리 가능) 사용하지 않는 부라우저의 경우(IE, 파이어폭스)에는 

line-height 속성과 height 속성을 이용하여 높이를 계산하여 넣어준다. (height = line-height * 줄수)

다른 방법으로는 개발언어로 글자수를 처리 하거나 jQuery Plugin 으로 구현 가능하다.

http://github.com/FrDH/jQuery.dotdotdot

---

text-overflow 

텍스트가 포함 된 요소를 오버플로 할 때 줄임표 추가 하는 속성

http://www.w3.org/TR/css3-ui/#text-overflow

• clip : 기본값. 텍스트를 잘라낸다.
• ellipsis : 말줄임표로 처리. 
• inherit : 상위요소의 속성과 동일하게 사용.

※ ellipsis 사용하려면 해당 요소에 overflow 속성 값이 hidden이나 scroll, auto 중 하나여야 하고 white-space:nowrap 속성을 함께 사용할 경우에만 적용되며 상위요소의 너비가 auto로 되어있는 경우는 적용할 수 없다.

버그

• Does not work on select elements in Chrome and IE, only Firefox. (Chrome 및 IE의 select 요소, Firefox에서만 작동하지 않습니다.)

• Some Samsung-based browsers, have a bug with overflowing text when ellipsis is set and if text-rendering is not auto. (일부 삼성 기반 브라우저는 줄임표가 설정되어 있고 text-rendering 이 auto 이 아닌 경우 오버플로가 발생하는 버그가 있습니다.

• Does not work in IE8 and IE9 on <input type="text" ( IE8 및 IE9에서 <input type="text"> 에 작동하지 않습니다.)

---

white-space

요소안에서 공백은 어떤식으로 처리할 것 인지를 선택하는 속성

* 공백은 줄바꿈(line break). 들여쓰기(tab). 공백(space) 등

• normal : 기본값. 공백을 여러개 넣어도 공백을 1개로 처리. 지정 된 너비를 초과할 경우 자동으로 줄바꿈.
• nowrap : 공백을 여러개 넣어도 1개로 처리. 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 표시.
• pre : 공백을 코드에 있는 그대로 표시. 코드에 줄바꿈이 없으면 줄바꿈을 실행하지 않는다.
• pre-wrap : 공백을 코드에 있는 그대로 표시. 코드에 줄바꿈이 없어도 자동으로 줄바꿈.
• pre-line : 공백을 여러개 넣어도 1개로 처리. 코드에 줄바꿈이 있을때나 없을때나 자동으로 줄바꿈.

---

word-wrap

긴 텍스트를 강제로 끊어 줄바꿈을 해주는 속성. (css3 추가 속성)

• normal : 기본값. 글자가 길어도 끊어지지 않고 한줄에 계속 표시.
• break-word : 글자 단위로 강제로 끊어서 줄바꿈.