CSS 말줄임 후 더보기 버튼 (React)

3줄 말줄임후 자세히 보기 버튼을 활성화 시킬려고 한다. 처음에는 CSS와 padding으로만 해결하려 했지만 잘되지 않았다.

인스타그램 PC버전을보니 인스타에서는 Js로 글자수를 카운팅햇허 줄이는 방법을 활용한다.

 

 

{/* [D] span.text 3줄 이상일시 짜르고 span.moreButtonWrap 추가.*/}
<p className={style.content}>
  <span className={style.text}>{text.substring(30)}</span>
  {text.length > 30 && (
    <span className={style.moreButtonWrap}>
    {"···"}
    <button className={style.moreButton}>자세히 보기</button>
    </span>
  )}
</p>

moreButtonWrap은 {text}가 일정숫자 이상일 때 subString을 이용해서 자르고 moreButton을 활성화 시킨다.

(간단하게는 이런식으로 접근하고 width 넓이에 따른 fontSize를 계산해서 몇글자에서 말줄임을 해야할지에대한 수식을 세우면 될거같다.)

 

분명 더 간단한 방법이 있을 텐데... 맨밑에줄을 패딩을 넣는 방법을 잘모르겠다.