형우의 웹개발

텍스트가 넘치면 말줄임표 붙여 주기 — text-overflow: ellipsis

아래 링크를 참고하면 된다.

👉 MDN text-overflow

현재 모든 최신 브라우저가 다 지원한다. (놀라운 건, IE는 이미 6부터 지원하고 있었다는 것 ㅋ)

아래는 예제다.

.ellipsis {
    width: 200px;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal !important;
    display: block;
}

왜 저런 식의 코드인지 설명은 링크에 들어가서 보길 바란다.

문단 말줄임

위 CSS로는 한 줄짜리만 말줄임표 붙이는 게 가능하다. 문단 수준에서 하려면 line-clamp 프로퍼티를 사용한다.

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

자세한 내용은 MDN의 -webkit-line-clamp 문서를 참고하라.

👉 댓글 바로 가기

15년차 풀스택 웹 개발자 안형우입니다

웹 개발에서도 중요한 것은 개념입니다.
이 블로그에는 제가 개발하며 익힌 개념들을 정리합니다.

워드프레스를 개발자 입장에서 다루는 데 오랜 시간을 써 왔습니다.
인프런 강의 “워드프레스 제대로 개발하기 어드민 편, 클라이언트 편” 지식 공유자입니다.

OOCSS에서 Utility-First CSS까지, CSS를 효과적으로 관리하는 데 관심이 많았습니다.
“프로젝트 중심 실전 CSS”라는 제목으로 관련 강의를 유튜브에 연재중입니다.

👉 소개 더 보기

대표글

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다