TIL no.35 - 더보기 버튼 만들기 ellipsis

긴 글을 감추는 모양인 ...과 함께 나오게 하기 위해서 아래와 같은 코드를 사용하면 됩니다 !

 

p.close 에서는 숨겨져 있도록 하고

p에서는 원래의 글이 다 보이도록 height를 100% 주었습니다.

 

overflow : 넘치는 부분은 hidden 으로 가리고

text-overflow: ellipsis 는 ...을 표현해줍니다.

display: -webkit-box 로 하고

-webkit-line-clamp 은 나오게 하고 싶은 줄의 수만큼 표시합니다.

 

위와 같이 className 이 바뀌게 하기 위해서

onClick 이벤트를 주었습니다.