여러 줄 말줄임표

1. HTML 

<div class="box">
    https://developer.mozilla.org/enUS/docs/Web/CSS/Specificity
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat, similique! Quas, accusantium modi quia dicta suscipit facilis similique dolor doloribus porro provident quidem sit blanditiis voluptas dolores, unde error repellendus?
    doloribusdoloribusdolodoloribusdoloribusdolodoloribusdoloribusdolodol
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed explicabo harum omnis nulla earum consequuntur vitae facilis id adipisci rerum hic ipsam eos repellendus, rem unde magnam illo. Nostrum, alias!
</div>

 

 

2. CSS

반드시 너비와 높이 제한이 있어야한다. 

.box {
    outline: 1px solid red;
    width: 290px;
    height: 67px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp : 3;
    -webkit-box-orient: vertical;
    word-wrap: break-word; /* 이것이 없으면 긴 단어가 오는 경우  줄바꿈이 일어나지 않는다.*/
}