[CSS] CSS로 긴 문자를 생략형(...)으로 바꾸는 방법

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재하며 틀린 내용은 지적해주시면 감사하겠습니다.

 

 CSS로 규정의 폭보다 문자 수가 많아지는 경우에 텍스트를 생략형으로 바꾸는 방법에 대해서 설명하고자한다. 그리고 한 줄의 텍스트뿐만 아니라 2줄 이상의 텍스트도 적용가능하다. 

 

 

한 줄 텍스트의 경우

---

 text-overflow를 사용한다. 사용할 때는 두 가지 규칙이 있다.

•  overflow: hidden; 및 white-space: nowrap; 과 함께 사용해야한다.
• text-overflow는 Block요소에 대해 inline(옆 방향)으로 튀어 나온 텍스트에 효과가 있다.

 

Block 요소 샘플 코드

// HTML
<div class="text-overflow" style="max-width: 200px;">
    CSS로 텍스트를 생략하는 테스트입니다.
</div>
// CSS
.text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

 

TABLE 샘플 코드

 table-cell 속성에서도 사용할 수 있지만 주의점이 있다. table 자체에 width를 지정할 필요가 있다는 것이다. 지정한다면 width:100%도 괜찮다. td의 폭을 넘는 순간 생략된다.

// HTML
<table style="max-width: 200px;">
    <tr>
        <td class="text-overflow" style="max-width: 200px;">
            CSS로 튀어나온 텍스트를 생략하는 테스트입니다. CSS로 튀어나온 텍스트를 생략하는 테스트입니다. CSS로 튀어나온 텍스트를 생략하는 테스트입니다.
        </td>
    </tr>
</table>

 

 

text-overflow가 적용되지 않은 경우

---

 최근에 레이아웃을 구성할 때 display: flex를 사용하는 경우가 늘어나고 있다. 그러나 text-overflow가 지정되어 있는 요소가 flex인 경우 텍스트의 생략이 통하지 않게 된다. 

 그러므로 사용할 때는 div등으로 적용할 요소를 감싸줄 필요가 있다.

 

 

2줄 이상 텍스트의 경우

---

 다음과 같이 CSS를 지정하면 된다.

// HTML
<div class="text-overflow-lines" style="max-width: 200px;">
CSS로 튀어나온 텍스트를 생략하는 테스트입니다. CSS로 튀어나온 텍스트를 생략하는 테스트입니다.CSS로 튀어나온 텍스트를 생략하는 테스트입니다. CSS로 튀어나온 텍스트를 생략하는 테스트입니다.
</div>
// CSS
.text-overflow-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

---

참고자료

https://forsmile.jp/css/1399/