multiline ellisis

1. chrome 기준으로, css로 multiline ellipsis 처리, ie 에서는 ellipsis 처리가 되지 않음.

See the Pen multiline-ellipsis css by zuhern (@zuhern) on CodePen.

2. css로 처리하는 방법을 찾음

See the Pen multiline-ellipsis css (fake ellipsis for ie) by zuhern (@zuhern) on CodePen.

원리

• before 로 ’…’ 생성
  after 로 ’ ’ 생성
• ’…’ 은 보여지는 영역 내 오른쪽 하단에 위치하고 (css > bottom : 0px)
  ’ ’ 은 전체 텍스트 영역의 오른쪽 하단에 위치한다. (css > bottom : 없음)
  그래서 전체 텍스트의 높이가 보여지는 영역과 같아지면 ’ ‘가 ’…’ 을 가림

단점

• 가리기 위해서는 배경색이 있어야 하므로 예시처럼 영역이 잡히게 됨
• 문장에 줄바꿈이 포함되어 있는 경우, ’…’ 허공에 머물게 됌

3. 결론

ie 에서 css 만으로는 multiline ellipsis가 한계가 있기 때문에 (고정된 위치에 … 노출)

1. 줄바꿈(br)을 제거한 후 css로 해결하기
2. 글자수를 지정하여 자른 후 마지막에 … 붙이기 (네이버 뉴스도 이렇게 함)

이 두가지 방법으로 좁혀졌고
결국 간단하게 글자수 제한으로 선택함.
마지막 줄에 공백이 일정하지 않게 남게 되지만, 가장 단순한 방법이 최고인듯.