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>
실제 적용된 모습
<style>
    p {
        max-width: 400px;
        border: 2px solid red;
    }
</style>
<div>
    <h2>데모 - 1</h2>
    <style>
        .demo-1 {
            -webkit-line-clamp: 2;
        }
    </style>
    <p class="demo-1">
        -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
        이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
        -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
        이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
        해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
        지정된 줄 수로 제한해서 텍스트가 잘리지만
        그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
    </p>
</div>
<div>
    <h2>데모 - 2</h2>
    <style>
        .demo-2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: auto;
        }
    </style>
    <p class="demo-2">
        -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
        이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
        -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
        이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
        해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
        지정된 줄 수로 제한해서 텍스트가 잘리지만
        그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
    </p>
</div>
<div>
    <h2>데모 - 3</h2>
    <style>
        .demo-3 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
    </style>
    <p class="demo-3">
        -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
        이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
        -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
        이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
        해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
        지정된 줄 수로 제한해서 텍스트가 잘리지만
        그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
    </p>
</div>
<div>
    <h2>데모 - 4</h2>
    <style>
        .demo-4 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: visible;
        }
    </style>
    <p class="demo-4">
        -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
        이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
        -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
        이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
        해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
        지정된 줄 수로 제한해서 텍스트가 잘리지만
        그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
    </p>
</div>
실제 적용된 모습
selector {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: /* value */;
}
/* 초깃값 - 브라우저 호환성 확인 */
-webkit-line-clamp: none;

/* 0보다 큰 정수 */
-webkit-line-clamp: 2;
-webkit-line-clamp: 5;

/* 글로벌 값 */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;
p {
    max-width: 400px;
    border: 2px solid red;
    overflow: visible;
    -webkit-line-clamp: 2;
    /* display: -webkit-box;과
       webkit-box-orient: vertical;를 적용하지 않았습니다. */
}
<p>
    -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
    이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
    -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
    이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
    해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
    지정된 줄 수로 제한해서 텍스트가 잘리지만
    그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
</p>
실제 적용된 모습 -webkit-line-clamp 속성은 display: -webkit-box;-webkit-box-orient: vertical; 적용되어 있을 때 구현하는 속성입니다. 이 두 속성의 값이 적용되어 있지 않는 요소에는 적용되지 않습니다.
p {
    max-width: 400px;
    border: 2px solid red;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    
     /* 생략 부호(...)를 표시한 이 후에도
        텍스트가 계속 표시됩니다. */
    overflow: visible;/
}
<p>
    -webkit-line-clamp속성은 텍스트 블록을 지정된 줄 수로 제한해서 표시하는 속성입니다.
    이 속성은 해당 요소의 display 속성의 값이 -webkit-box로 설정되고
    -webkit-box-orient 속성의 값이 vertical로 설정되어 있을 경우에 작동합니다.
    이때 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시합니다.
    해당 요소의 overflow 속성의 값이 visible이 아닌 값으로 설정되어 있으면
    지정된 줄 수로 제한해서 텍스트가 잘리지만
    그렇지 않으면 생략 부호(...)를 표시한 이 후에도 텍스트가 계속 표시됩니다.
</p>
실제 적용된 모습 생략 부호(...)를 표시 이 후에도 텍스트가 계속 표시됩니다.

마지막 업데이트 정보: 2024-06-13