CSS 말줄임 표시하는 방법(text-overflow: ellipsis)

글 목록에서 제목이나 내용을 간략히 보여주려고 할 때, 보여줄 내용이 길면 내용의 일부만 보여주고 나머지를 말 줄임 표시(…)를 합니다.

CSS를 이용하여 간단히 처리해보도록 하겠습니다.

🟩 1줄 말줄임

Lorem ipsum dolor sit amet ➔ Lorem ipsum dol...

/*css*/
.sc_themepost .category { 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

• overflow: hidden: 박스에서 넘쳐난 텍스트 숨기기
• white-space: nowrap: 줄바꿈이 없어짐
• text-overflow: ellipsis: ... 말줄임 효과
• word-break: break-all: 어절이 유지되지 않고 끊어져서 줄바꿈 됨

🟩 N줄 말줄임

1줄이 아닌 여러줄로 바꾸기 위해선 -webkit-line-clamp를 사용해 라인수를 설정할 수 있습니다.

.sc_themepost .category { 
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

• -webkit-line-clamp: 글의 최대 라인수를 결정
• -webkit-box-orient vertical 은 박스를 수직방향으로 배치하고, horizontal 은 박스를 수평방향으로 배치
• -webkit은 크로스브라우징을 위해 필요한데, 구글, 사파리 브라우저에서 사용 가능하다 적용할 때 브라우저 지원 범위를 확인하고 사용하기

💡 말줄임이 적용되지 않을때 '체크리스트'!

1. width가 제대로 지정되어 있는가?
2. block태그이거나,그렇지 않다면 display:block 이 되어 있는가?(flex도 안됨)
3. 글자가 width를 넘어가는 조건을 충족시켰는가?