HTML, CSS 글자수 1줄, 2줄이상일때 처리방법

한줄일때

p {
   width: 6rem;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

• width 값을 지정해야 한다!
• overflow: hidden;, white-space: nowrap; 으로 설정한다.

두줄이상

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