박스 넘어가면 말줄임표로 만들

댓글프리뷰 부분을 박스를 넘어가면 줄 바꿈이 되지 않고 ...으로 만들어보자.

 

// 컴포넌트 부분
const CommentPreview = ({ postProps }: { postProps: PostProps }) => {
  const { profileImage, nickname, content } = postProps.postData.commentList[0];

  return (
    <CommentPreviewS>
      <img src={profileImage} alt='profileImage' />
      <div className='nickname'>{nickname}</div>
      <div className='content'>{content}</div>
    </CommentPreviewS>
  );
};

// CSS부분
const CommentPreviewS = styled.div`
  display: flex;
  align-items: center;
  height: 1.5rem;
  margin: 0.62rem 1rem 0 1rem;
  font-size: 0.875rem;

  img {
    height: 1.5rem;
    margin-right: 0.56rem;
  }
  .nickname {
    margin-right: 0.25rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .content {
    color: var(--font-color3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;

여기서 바뀐부분은 .content부분이다.

 

1. white-space: nowrap;

줄 바꿈을 방지해준다.

 

2. overflow: hidden

넘어간 부분을 숨겨준다.

 

3. text-overflow: ellipsis;

넘어간 부분에 ...을 추가해준다.