한줄일때

안녕하세...

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;를 추가한다.

 

 

출처 :https://velog.io/@syoung125/CSS-text-overflow-ellipsis-%EB%91%90%EC%A4%84-%EC%9D%B4%EC%83%81-%EC%B2%98%EB%A6%AC