더보기 버튼 만들기

더보기 / 접기 버튼 생성

export default function App() {
    const [toggle, setToggle] = useState(false);

    return (
      <ContentStyled toggle={toggle}>
        <p>{book.content}</p>
        <div className="toggle">
          <button onClick={() => setToggle(!toggle)}>
            {toggle ? "접기" : "더보기"}
          </button>
        </div>
      </ContentStyled>

    );
}

const ContentStyled = styled.div`
    width: 60%;
    p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: ${(props) => (props.toggle ? "none" : 4)};
        padding: 20px 0 0;
        margin: 0;
    }
    .toggle {
        display: flex;
        justify-content: end;
    }
`;

text-overflow: ellipsis;

• CSS 속성으로, 요소 내용이 너무 길어서 요소의 영역을 벗어날 때, 텍스트를 생략 부호 (...)로 표시하는 방법을 지정
• 이를 사용하면 텍스트가 요소의 영역을 벗어날 때 자동으로 생략 부호를 추가하여 사용자에게 정보를 제공할 수 있음

-webkit-line-clamp

toggle 이 true (더보기 클릭) -webkit-line-clamp 을 none 으로 지정
toggle 이 false(더보기 클릭X) -webkit-line-clamp 을 4 으로 지정