1. 글의 목적

CSS로 작업하다 보면 텍스트를 말줄임 처리하거나 문장 수를 제어해야 할 때가 자주 있다. 그동안은 구글링을 통해 찾은 코드 조합을 그대로 사용하는 데 그쳤지만, 이번 기회를 통해 그 원리를 제대로 이해하고 직접 활용할 수 있도록 학습해보려 한다.

2. 한 줄 텍스트 말 줄임

한 줄 텍스트에 말줄임을 적용하려면, 우선 HTML 요소가 “가로 너비를 조정할 수 있는” 블록 요소여야 한다. 텍스트가 부모 요소의 가로 너비 내에서 자동으로 개행되지 않도록 white-space: nowrap 속성을 적용해야 한다.

.selector {
 display:block; /* 블록, 인라인 요소 여부에 따라 다름 */
 white-space:nowrap;
 text-overflow: ellipsis;
 overflow:hidden;
}

위 코드에서 overflow: hidden을 통해 넘치는 텍스트를 가려주고, text-overflow: ellipsis로 넘친 텍스트에 말줄임 표시를 적용한다.

여러 줄 텍스트에 말줄임을 적용하려면 white-space 속성 대신 다음과 같은 속성들을 사용한다.

.selector {
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
}

display: -webkit-box : 해당 영역을 box 형태로 관리한다.
webkit-line-clamp : 영역 내의 컨텐츠 최대 라인 수를 결정한다.
- 이 속성이 제대로 동작하려면 display: -webkit-box와 webkit-box-orient: vertical이 함께 지정되어야 한다.
webkit-box-orient: vertical : 영역 내의 요소들을 수직 방향으로 정렬한다.
- -webkit-box-orient 속성은 영역 내의 요소의 배치 방향을 설정하고 webkit-line-clamp 속성의 값 만큼에서 말줄임 표시(…)를 적용한다.
overflow: hidden : 부모 요소를 넘는 텍스트를 가린다.