CSS로 텍스트 줄 수 제한하기 -webkit-line-clamp

개인 프로젝트를 진행하면서, 텍스트가 일정한 줄 수를 초과할 경우 깔끔한 레이아웃을 유지하기 위해 자동으로 생략(...) 처리해야 하는 상황이 발생했습니다.

 

텍스트를 제한된 줄 수 안에 표시하기 위해 CSS의 -webkit-line-clamp 속성을 사용합니다.

이 속성은 주로 WebKit 기반의 브라우저(예: Chrome, Safari)에서 지원되며, 여러 줄에 걸친 텍스트를 클램핑하는 데 사용됩니다.

.title {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

1. -webkit-line-clamp 속성

-webkit-line-clamp 속성은 텍스트가 몇 줄까지만 표시될지를 지정합니다.

위 코드에서는 -webkit-line-clamp: 2;로 설정되어 있어, 텍스트가 최대 두 줄까지만 표시됩니다.

만약 텍스트가 두 줄을 초과하면, 나머지 텍스트는 자동으로 생략되고 끝에 ...이 추가됩니다.

2. -webkit-box-orient 속성

-webkit-box-orient는 텍스트의 방향을 설정하는 속성입니다. vertical로 설정하면 텍스트가 수직 방향으로 표시되며, 여러 줄의 텍스트를 구성할 수 있습니다.

이 속성은 -webkit-line-clamp와 함께 사용되어 텍스트가 지정된 줄 수를 초과하지 않도록 제어합니다.

3. overflow: hidden 및 text-overflow: ellipsis 속성

• overflow: hidden: 텍스트가 지정된 영역을 넘어서지 않도록 숨깁니다.
• text-overflow: ellipsis: 숨겨진 텍스트의 끝에 ...을 표시하여, 텍스트가 잘렸음을 시각적으로 나타냅니다.