text-overflow 2줄 ellipsis (텍스트 2줄 이상 ...처리하기)

div{
   display: -webkit-box;
   -webkit-line-clamp: 2;  /* 라인 수 */
   -webkit-box-orient: vertical;
}

다들 바쁘시니 빠르게 갑시다.
위처럼 코드를 작성 후 라인 수를 지정해 주면 됩니다.

---

디자이너: " 여기서 모바일은 저희 한 줄로 갈까요? "
하고 반응형에서는 PC 두 줄과 달리 모바일에서는 한 줄만 나오게 하는 경우가 있습니다.
이때 위에 있는 코드의 라인 수를 1로 변경하면 기존의 ellipsis와는 다르게 ... 처리가 되지 않는 것을 확인하실 수 있습니다.

div{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* 한 줄 ...처리를 위한 기본 설정 */

    display: block;
    /* 블럭 처리를 통해 ...으로 변경 가능 */
}

모바일에서는 위처럼 코드를 변형해 주시면 한 줄로 ... 처리가 되는 것을 보실 수 있습니다.