block요소에 line이 길어질 경우 생략하기

유튜브를 보다가 이렇게 특정 줄 이상일 경우 ... 표시가 되어있는것을 알 수 있다. 어떻게 할까??

-webkit-box설정하기

생략하고 싶은 블럭에 display: -webkit-box; 로 설정을 해 준다.
이렇게 해준다면 해당 요소에 -webkit 속성을 사용할 수 있다.

라인수, 세로설정하기

-webkit-line-clamp: 2;를 통해 2줄 이상일 경우 생략한다고 설정한다.
위의 속성은 -webkit-box-orient: vertical; 을 설정해야지만 사용할 수있기 때문에 해당속성도 설정해 둔다.

...설정하기

나머지는 span의 나머지 처리와 동일하다.

	overflow: hidden;
	text-overflow: ellipsis;

전체 css

      p:first-child {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }