CSS로 더보기 버튼 만들기

텍스트 길이를 줄였을때 더보기 버튼이 나오고, 아닐때는 모든 텍스트가 보이도록 만들어보겠습니다.

1단계. 시작하기

저는 위의 이미지에서 카드의 컨텐츠를 먼저 숨기도록 하겠습니다.

시작 코드

    <div class="card-content">
      <img
        src="https://images.unsplash.com/photo-1647773319917-f9a98647f6b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
        alt="바다 사진"
        class="card-content-img"
      />
      <h1 class="card-header">제목1</h1>
      <p class="card-description">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis esse
        fugit nihil earum aut nobis, praesentium illum expedita quia, mollitia
        possimus sed, numquam et velit aspernatur tenetur vero doloremque ipsum!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero corporis
        sunt suscipit beatae rerum exercitationem aliquam architecto? Aspernatur
        ex in cum suscipit iusto repudiandae dolores hic, rerum, quae voluptatem
        quidem.
      </p>
    </div>

.card-content {
  width: 20rem;
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  margin: 5rem auto;
  padding-bottom: 3rem;
}

.card-header {
  padding: 0 1rem;
  margin: 2rem 0;
  font-size: 24px;
}

.card-description {
  font-size: 20px;
  padding: 0 1rem;
}

.card-content-img {
  width: 100%;
}

2단계. 라인 줄이기

webkit 사용

-webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.

display 속성을 -webkit-box 또는 -webkit-inline-box로, 그리고 -webkit-box-orient (en-US) 속성을 vertical로 설정한 경우에만 동작합니다.

크롬이나 엣지에서 동작하던 속성이지만, 지금은 IE를 제외한 브라우저에서도 지원을 하고 있는 속성입니다.

.card-description {
  font-size: 20px;
  padding: 1rem;
 
  /* 추가하기 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
  overflow: hidden;
}

3단계. 더보기 버튼 추가

더보기 버튼을 input 체크박스로 만듭니다.
input이 체크 되었을때는 펼치고, 아닐때는 접도록 만들겠습니다.

		<!-- (생략) -->
        sunt suscipit beatae rerum exercitationem aliquam architecto? Aspernatur
        ex in cum suscipit iusto repudiandae dolores hic, rerum, quae voluptatem
        quidem.
      </p>
      <!-- 추가 되는 부분 -->
      <input type="checkbox" class="card-content__more-btn">
    </div>

.card-content__more-btn {
  appearance: none;
  border: 1px solid black;
  padding: 0.5em;
  border-radius: 0.25em;
  cursor: pointer;
  margin: 1rem;
}

.card-content__more-btn::before {
  content: '더보기';
}

.card-content__more-btn:checked::before {
  content: '닫기';
}

.card-description:has(+ .card-content__more-btn:checked) {
  -webkit-line-clamp:unset
}

위 코드를 추가하게 되면 더보기 버튼을 클릭할 때 마다 텍스트 길이가 변하는 것을 알 수 있습니다. (실제로 버튼을 클릭하는게 아닌 체크박스가 체크되었다가 해제 되었다가 하는 것입니다.)

마무리

간단한 예제를 통해서 더보기 버튼을 구현해보았는데, 여러가지 방법으로 응용을 해보면서 연습해보면 좋을 것 같습니다.