text-overflow: ellipsis

한줄일때

Lorem Ipsum is simply dummy .......

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

두줄이상

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy ...

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; 으로 설정한다.