div {
    width: 200px;
    border: 2px solid red;

    /* 줄바꿈하지 않고 말줄임을 표시하는 
       방법에 필요한 CSS 속성들 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div>
    텍스트가 콘텐츠 박스의 끝에 도달했을 때
    자동으로 줄바꿈하지 않고
    오버플로우되는 텍스트는 숨기고
    생략 부호(...)를 표시하는
    방법에 대해 알아봅니다.
</div>
실제 적용된 모습
div {
    width: 200px;
    border: 2px solid red;
}
<div>
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
실제 적용된 모습
<div style="white-space: nowrap;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
실제 적용된 모습
<div style="white-space: nowrap; overflow: hidden;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
실제 적용된 모습
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
    text-overflow 속성은 텍스트 영역을 벗어나
    오버플로우되어 숨겨진 텍스트가 있는지를
    시각적으로 나타내는 생략 부호를 표시할지
    아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다.
</div>
실제 적용된 모습
div {
    max-width: 200px;
    border: 2px solid red;

    /* 텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는
       방법에 필요한 CSS 속성들 */
    display: -webkit-box;   
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3; /* 제한할 텍스트의 줄 수 */
}
<div>
    -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
    이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
    -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
    이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
    해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
    지정된 줄 수로 제한해서 텍스트가 잘리지만
    그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
</div>
실제 적용된 모습
p {
    max-width: 200px;
    border: 2px solid red;
    overflow: visible;
    -webkit-line-clamp: 2;
}
<div>
    -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
    이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
    -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
    이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
    해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
    지정된 줄 수로 제한해서 텍스트가 잘리지만
    그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
</div>
실제 적용된 모습 -webkit-line-clamp 속성은 display: -webkit-box;-webkit-box-orient: vertical; 적용되어 있을 때 구현하는 속성입니다. 이 두 속성의 값이 적용되어 있지 않는 요소에는 적용되지 않습니다.
p {
    max-width: 200px;
    border: 2px solid red;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    
     /* 생략 부호(...)를 표시한 이 후에도
        텍스트가 계속 표시됩니다. */
    overflow: visible;/
}
<div>
    -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
    이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
    -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
    이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
    해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
    지정된 줄 수로 제한해서 텍스트가 잘리지만
    그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
</div>
실제 적용된 모습 생략 부호(...)를 표시 이 후에도 텍스트가 계속 표시됩니다.
text-overflow와 -webkit-line-clamp 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-overflow 1 12 7 3
-webkit-line-clamp 6 17 68 5