css 속성 text-overflow는 텍스트가 영역을 넘칠 때 어떻게 처리할 지를 결정해주는 속성입니다.

css 속성 text-overflow

해당 속성의 값은 두 가지가 있습니다.

• clip: 넘치는 텍스트 자름
• ellipsis: 말 줄임표 처리

참고로 text-oveflow가 작동하려면 overflow 속성이 hidden | scroll | auto 이고, white-space: nowrap이어야 합니다. white-space 속성에 대해서는 https://vault.dev-sim.com/post/398를 참고하세요.

p {
	width: 400px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

ellipsis로 말 줄임표 처리할 때 말 줄임이 적용되는 라인 수를 지정하려면?

ellipsis로 말 줄임표 처리할 때 말줄임이 적용되는 라인 수를 지정하려면 -webkit-line-clamp라는 속성을 활용하면 됩니다. 이 속성을 사용하려면 display: -webkit-box이여야 합니다. display: flex의 초기 사양인데 현재는 -webkit-line-clamp를 사용할 때만 사용됩니다. 그리고 추가로 -webkit-box-orient: vertical 조건이 붙어야 합니다. 텍스트가 세로 방향으로 쌓인다는 것을 명시해주는 것입니다. 최종적으로 다음과 같이 css가 작성되어야 합니다.

p {
	width: 400px;
	display: -webkit-box;               /* 줄 단위 쌓기 위한 박스 생성 */
	-webkit-box-orient: vertical;       /* 세로 방향으로 줄 쌓기 설정 */
	-webkit-line-clamp: 3;              /* 최대 3줄까지만 보이기 */
	overflow: hidden;
	text-overflow: ellipsis;
}