CSS로 글자 자르기

우선 CSS로 글자를 자르기 위해서는 글자가 출력될 너비가 필요하다. 그리고 너비를 가질 수 없는 경우에는 너비를 가질 수 있게 변경해야 한다.

요소는 block값으로 변경하면 요소의 너비는 부모 너비의 100%를 차지하도록 변경된다.

만약 inline-block으로 변경하면 직접 요소의 너비를 설정해야 한다. 즉, 일정한 고정된 너비를 가지는 것이 전제 조건이다.

글자수가 해당 너비를 넘어서게 되면 자동으로 줄바꿈이 이루어지는데, 줄바꿈을 안하게 하려면 white-space 속성을 nowrap 으로 하면 줄바꿈이 되지않는다.

그러면 너비를 벗어나서 글자가 나오는데 넘치는 부분을 안보이게 해주는 overflow 속성에 hidden을 주면 넘치는 부분을 화면에서 숨긴다.

그리고 숨겨진 부분을 text-overflow 속성에 ellipsis를 설정하면 말줄임표(...)가 숨겨지는 여역의 끝에 생성된다.

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

그런데 여기까지는 한 줄 자르기에 해당된다. 여러 줄 단위로 글자를 잘라주려면 어떻게 해야할까?

일단 여러줄이 되려면 white-space: nowrap 속성을 없애주어야 한다. 그리고 줄 높이를 추가해줘야한다. 보여주고 싶은 줄의 행수 만큼 높이를 설정하면 된다.

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

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

아래는 내가 하는 프로젝트에서 사용한 코드

> .thumbnail_title {
    display: -webkit-box;
    height: 50px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
  }

위와같이 설정해준 결과

참고 링크