[CSS] 컨텐츠 길이 초과되었을 때 ...으로 나타내기 (text-overflow:ellipsis)(overflow: hidden)

학원에서 진행중인 프로젝트에서 블록안에 텍스트 내용이 오버 되었을 떄 ...으로 처리하는 부분에서 막혀봤어서 한 번 정리해보려 한다.

 

See the Pen vYLKwXQ by Sang Hoon Jeong (@DevilFront) on CodePen.

 

이건 기본적으로 영역밖을 초과한 내용에 한해서 안보이게 하는 overflow:hidden 을 사용해준 상태다.

아래는 내가 작성하고 끝났다라고 1차적으로 생각하게 만든 상태다. 무언가 이상한 것을 느낄수 있을 것이다.

 

See the Pen vYLKwxv by Sang Hoon Jeong (@DevilFront) on CodePen.

아래를 보면 ...으로 표시 되는 부분이 내가 생각한 내용이랑 다르다는 것을 볼 수 있을 것이다. 예를 들어 나는 마르고... 뒤에 ...이 아니라 닳도록이 밑에줄에 나오고 그 줄에서 표시할만큼 표시하고 모자란 부분에 ...으로 표시되길 바란다.

 

See the Pen LYGZojB by Sang Hoon Jeong (@DevilFront) on CodePen.

 

아래처럼 보면 내가 원하는대로 컨텐츠가 그 줄이 끝나는 기준이 아니라 내용순서대로 내려오면서 영역이 끝나는 부분은 ...으로 처리 되는것을 볼 수가 있다.  "-webkit-line-clamp: 4;" 부분을 보면 4번쨰줄부터 ...으로 표시 하겠다는 뜻이다.