css 말줄임 표시

한 줄 

.ellipsis_box {
    flex: 11;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

 

---

두 줄

.ellipsis_box{
	white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 95px;
}

 

여러 줄로 자르는 경우 line-clamp 속성과 box-orient 속성이 중요하다.

• line-clamp : 3 /* 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼 제한 */
• box-orient : 3 /* 콘텐츠를 가로 또는 세로로 배치할지 여부를 결정 */