CSS로 글자 자르기 - 한 줄, 여러 줄

고정된 너비만을 제공하는 레이아웃에서는 서버단에서 화면에 출력할 글자수를 미리 가늠하며 디자인하기가 수월합니다. 레이아웃이 유동적인 너비를 가지거나 서버 스크립트쪽에 접근할 수 없어 글자수를 제어하기 곤란할 경우에는 아래에서 설명하는 방법들이 추천됩니다.

한 줄 단위로 글자 자르기

처음으로 적용해 볼 것은 한 줄, 혹은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비에 맞게 한 줄 단위로 자르는 법이다. 이는 여러가지 CSS 속성들을 조합하여 조건을 맞추는 일부터 시작된다.

출력될 너비 조정하기

CSS로 글자 자르기를 위해서는 글자가 출력될 너비가 필요하다. 기본적으로 CSS 박스 모델 (box model) #1 에서 살펴봤듯이 display 속성의 inline 값과 같이 요소의 너비를 가질 수 없는 경우에는 이를 너비를 가질 수 있게 변경해야 한다.

.target {
    display: block;
}

요소를 block 값으로 변경했기에 자동적으로 요소의 너비는 부모 너비의 100%를 차지하도록 변경된다. 만약 inline-block 과 같이 콘텐츠에 따라 유동적인 너비를 가진다면 직접 요소의 너비를 설정해야 한다. 즉, 일정한 고정된 너비를 가지는 것이 전제 조건이다.

.target {
    display: inline-block;
    width: 200px;
}

줄바꿈을 없애기

너비가 지정된 요소라도 글자수가 해당 너비를 넘어서게 되면 자동으로 줄바꿈이 이루어진다. 이 것은 white-space 속성을 nowrap 으로 설정하여 방지할 수 있다.

.target {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
}

변경전나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

변경후나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

넘치는 부분을 감추기

CSS에서 요소를 넘치는 부분을 처리하는 것은 overflow 속성이 담당한다. 대상 요소의 overflow 속성을 hidden 으로 설정하여 넘치는 부분을 화면에서 숨긴다.

.target {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}

변경후나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

숨긴 부분 처리

위에서 설정한 속성들과 속성값으로 인해 숨겨지게 되는 부분을 처리하는 방식은 text-overflow 속성이 담당하며, ellipsis 를 설정하면 말줄임표(...)가 숨겨지는 영역의 끝에 생성된다(오우~ 굿!).

.target {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

변경후나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

이상의 내용은 출력될 글자수를 서버단에서 적은 수로 제한하지 않은 경우에는 유동적인 너비에 충분히 대응된다. 다만, 한 줄로 레이아웃이 제한된다는 것에 유념해야 한다.

여러 줄 단위로 글자 자르기

다음으로 적용해 볼 것은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비와 높이에 맞게 여러 줄 단위로 자르는 법이다. 이는 위에서 다룬 내용의 반복과 추가적인 설정이 필요하다.

한 줄 출력의 해제 및 재설정

위의 한 줄 자르기에서 white-space 속성을 이용해서 여러 줄에 걸쳐 출력되는 글자를 한 줄로 출력되게 했었다. 이를 해제하여 다시 여러 줄로 표현되게 해야 한다.

.target {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
}

변경후나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

줄 높이의 추가

여러 줄을 출력하기 위해서는 요소의 줄 높이의 설정이 필수다. 이 줄 높이가 기준이 되어 보여주고 싶은 줄의 행수 만큼 요소의 높이를 설정하게 된다.

.target {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    line-height: 1.2;
}

요소 높이의 추가

위에서 설정한 줄 높이를 기준으로 요소의 높이를 설정한다. 즉, 2줄을 보여주고 싶다면 높이를 줄 높이의 2배로 설정하고 3줄을 보여주고 싶다면 줄 높이의 3배로 설정하면 된다.

.target {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
}

변경후

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

height 대신에 max-height 를 설정해서 최대치만 제한해도 된다.

숨긴 부분 처리 추가

위의 설정으로 여러 줄을 출력하고 글자를 자를 수 있지만 text-overflow 속성으로 숨긴 부분에 대한 처리가 되질 않는다. 여러 줄에 걸친 숨긴 처리는 현재 웹킷 계열의 브라우저에서만 지원하는 속성으로 아래와 같다.

.target {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

변경후

나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

• text-align: left : 글자 정렬이 양쪽 정렬이면 말 줄임표가 숨겨질 수 있으니 좌측 정렬로
• word-wrap: break-word : 잘라버릴 글자를 단어 단위로
• display: -webkit-box : 여백 삽입과 같이 유연한 높이 증가를 위해 플렉스 박스형태로 변환
• -webkit-line-clamp: 3 : 보여줄 줄 갯수
• -webkit-box-orient: vertical : 플렉스 박스의 방향 설정

다시 말하자면, 크롬이나 오페라, 사파리 같은 웹킷 계열의 브라우저는 여러 줄의 글자를 자르는 자신만의 방법을 제공하고 있기에 높이나 줄 높이 설정이 필요치 않는다. 다만 크로스브라우징을 위해서 필요할 뿐이다.

필자가 글을 작성하면서 예제를 같이 삽입하다보니 기존의 설정들과 뒤엉켜 말줄임표가 보여지지 않을때도 있었다. 마우스로 드래그해보거나 창의 너비를 변경시켜보면 등장할 터이다. 실제로 사용할때는 그런적이 없었지만...