text-overflow

1. text-overflow는 block container에서 넘치고 있는 내용에 대해서 효과를 주는 속성이다. (text가 자신이 속한 block container에서 overflow되게 만드는 것은, overflow와 white-space라는 css 속성이다.)
2. overflow는 inline progression direction으로만 발생한다. (가로로 글을 쓰고 있는데 텍스트박스의 밑으로 overflow되는 것은 불가능함.)

• clip
  • text-overflow의 기본 설정값이다.
  • 텍스트가 박스 크기를 넘어가면 박스가 끝나는 지점에서 글자를 잘라버린다.

• ellipsis
  • 텍스트가 박스 크기를 넘어가면 박스가 끝나는 부분을 ... 처리하고 글자를 잘라버림. clip보다 ...이 차지하는 공간만큼 글자는 덜 들어간다.

<한 줄 넘게 표시하고 싶을 때>

display: -webkit-box; /* 블록을 임의의 배치 순서로 변경할 수 있게 해줌 */
-webkit-line-clamp: 3; /* 라인수 */
-webkit-box-orient: vertical; /* 박스의 흐름의 방향을 지정 */