CSS -webkit-line-clamp 속성 – 텍스트의 줄 수를 제한하여 생략 부호(…) 표시하기

<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>