[CSS] text-overflow: ellipsis 두줄 이상 처리

Ko Seoyoung·2022년 1월 8일
7

text ellipsis를 설정하기 위해 찾아본적이 정말 여러번인데 이제는 그만 찾아보고 척척 쓸 때가 되지 않았나 해서 까먹지 않으려고 적어둔다.

한줄일때

안녕하세...

p {
   width: 6rem;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}
  • width 값을 지정해야 한다!
  • overflow: hidden;, white-space: nowrap; 으로 설정한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

두줄이상

안녕하세요 저는
서울에 살고...

p {
   width: 6rem;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-word;
    
   display: -webkit-box;
   -webkit-line-clamp: 2; // 원하는 라인수
   -webkit-box-orient: vertical
}
  • white-space:nowrap을 하면 두줄이상이 될 수 없으므로 word-break: break-word;으로 변경하고,
  • display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;를 추가한다.
profile
Web Frontend Developer 👩🏻‍💻 #React #Nextjs #ApolloClient

1개의 댓글

comment-user-thumbnail
2023년 9월 1일

word-break: break-word; 를 break-all로 바꿔야 원하는 너비까지 꽉차면서 ...으로 변환됩니다 !

답글 달기