overflow 제어 in CSS

아래 사진과 같이 게시물 제목이 지나치게 길면
부모영역을 벗어나 다른 영역까지 영향을 미치게된다.

이를 제어 하기 위해
제목을 표시하는 태그에
아래와같이 CSS 스타일을 추가하였다.

import styled from "@emotion/styled";

export const BoardsBestItemTitle = styled.div`
	width: 282px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
`

export const ColumnTitle = styled.div`
	width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
`

적용한 스타일 설명

white-space: nowrap 텍스트가 지정된 너비를 넘어가도 줄바꿈을 하지 않도록 한다.
overflow: hidden 자식요소가 부모영역을 넘어가면 넘어가는 부분은 보여주지 않도록 한다.
text-overflow: ellipsis 부모영역을 넘어가는 텍스트는 ...으로 생략하여 보여준다.

그리하여 아래 사진처럼 텍스트가 길어도 영역이 늘어나지 않게 되었다.