[css] 한 줄, 여러 줄 말줄임

이번 시간에는 글자가 특정 너비 혹은 줄을 넘어가는 경우 말줄임(...)으로 나타나게 해보자!

1. 한 줄 말줄임

1) 미리보기

See the Pen text one line ellipsis by KumJungMin (@kumjungmin) on CodePen.

2) 전체 코드 보기

• 이미지와 같은 한 줄 말줄임은 아래 코드로 구현할 수 있다.
• 말줄임에 필요한 속성은 총 4가지(width, text-overflow, white-space, overflow)이다.

<div class="text">가나다라마바</div>

.text {
  width: 250px;
  font-size: 50px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

3) CSS 코드 자세히 보기

(1) width, 너비를 지정하자

• 글자가 얼마의 너비를 넘어갔을 때 말줄임을 사용할 건지 정해준다.

.text {
  width: 250px;  /*글자가 250px을 넘으면 숨길거야*/
}

(2) white-space, 한 줄로 표기하자

• html에서 글자가 특정 범위를 넘어갈 시 자동으로 줄바꿈이 된다.
• 하지만 우리는 한 줄 말줄임을 해야 하기에, 자동 줄바꿈을 적용하면 안된다.
• white-space: nowrap을 하여 자동 줄바꿈을 없애자

.text {
  width: 250px;  
  white-space: nowrap;  /*자동 줄바꿈을 적용하지 않을거야*/
}

(3) text-overflow & overflow, 넘치는 경우를 처리하자

• 우리는 글자가 특정 너비를 넘어가는 경우, 말줄임 처리를 하고 싶다.
• 이를 위해서는 text-overflow 처리를 해야한다.
• text-overflow는 글자가 특정 범위를 벗어나는 경우에 어떻게 처리할 건지 지정할 수 있다.
• 말줄임 처리를 하려면, text-overflow: ellipsis를 하면 된다.

잠깐! text-overflow를 적용하기 위해선 overflow(visible 제외)를 지정해야한다.

.text {
  width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; 
}

---

2. 여러 줄 말 줄임

앞서 우리는 한 줄 말줄임 처리를 보았다.
그렇다면 여러 줄을 말줄임 처리하고 싶을 때 어떻게 해야할까? 같이 살펴보자

1) 미리보기

See the Pen text mutiple line ellipsis by KumJungMin (@kumjungmin) on CodePen.

2) 전체 코드 보기

• 이미지와 같은 여러 줄 말줄임은 아래 코드로 구현할 수 있다.
• 말줄임에 필요한 속성은 총 6가지이다.
• width, display, -webkit-line-clamp, -webkit-box-orient, text-overflow, overflow

<div class="text">가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아가나다라마바사아아</div>

.text {
  width: 300px;
  display: -webkit-box;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

3) CSS 코드 자세히 보기

(1) width, text-overflow 처리하기

• 앞서 한 줄 말줄임에서 한 것처럼 너비와 text-overflow 설정이 필요하다.
• 또한, text-overflow를 사용하기 위해서는 overflow 지정이 필요하다.

.text {
  width: 300px;
  text-overflow: ellipsis;
  overflow: hidden;
}

(2) webkit-line-clamp, 최대 라인수 지정하기

• 만약 세 번째 라인부터 말줄임을 주고 싶다면, webkit-line-clamp: 3 속성을 사용하면 된다.

.text {
  width: 300px;
  text-overflow: ellipsis;
  overflow: hidden;
  webkit-line-clamp: 3;
}

어? 그런데 말줄임 적용이 안된다? 그 이유가 뭘까?

• webkit-line-clamp 속성을 사용하기 위해선, display는 webkit-box 또는 webkit-inline-box 로 지정해야 하며, webkit-box-orient속성을 vertical로 적용해야 한다!

(2) display를 박스로 변경하기

• display에 -webkit-box를 하여, 요소를 박스로 지정한다.

.text {
  width: 300px;
  text-overflow: ellipsis;
  overflow: hidden;
  webkit-line-clamp: 3;
  display: -webkit-box;   
}

• 그 다음, 박스 내부 컨텐츠의 정렬은 수직 정렬로 변경해야 한다.
• display가 box일 땐 webkit-box-orient 을 사용해 내부 컨텐츠 정렬을 변경할 수 있다.
• 아래 예시는 webkit-box-orient을 horizontal, vertical로 했을 때 차이이다.

See the Pen box-orient by KumJungMin (@kumjungmin) on CodePen.

• 예시에서 본 vertical을 지정하여 글자를 수직 정렬로 변경하면 완료이다!

.text {
  width: 300px;
  text-overflow: ellipsis;
  overflow: hidden;
  webkit-line-clamp: 3;
  display: -webkit-box;   
  -webkit-box-orient: vertical;  /* 추가 */
}

잠깐! webkit-line-clamp은 webkit 엔진을 사용치 않는 브라우저에선 문제가 된다! 그렇기에 line-height, height(line-height * 라인수)를 줘야 한다.

.text {
  width: 300px;
  font-size: 40px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 50px;    /* 추가 */
  height: 150px;        /* line-height x line */
}

See the Pen text mutiple line ellipsis (with height) by KumJungMin (@kumjungmin) on CodePen.