[CSS] 텍스트에 말줄임표(...) 적용하기 / text-overflow

1줄 말줄임표 적용

.text {
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
 }

반드시 width 값이 들어가야한다.

 

 

2줄 이상 말줄임표 적용

.text {
    display: -webkit-box;
    width: 100%;
    height: 60px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

-webkit-line-clamp는 몇 줄까지 나올지를 정한다. 위의 예시는 3이므로 3줄까지 나오도록 한다.

width / height값이 들어가야한다.